通过js动态更新css变量

一、vue2：

全局：

<template>
  <div>
    <p>当前背景色由 CSS 变量控制</p>
    <button @click="toggleTheme">切换主题</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      themeColor: '#42b883' // 响应式数据
    }
  },
  watch: {
    themeColor(newVal) {
      // 更新 :root 上的 CSS 变量
      document.documentElement.style.setProperty('--theme-color', newVal)
    }
  },
  mounted() {
    // 初始化 CSS 变量（确保首次渲染生效）
    this.updateCssVar()
  },
  methods: {
    toggleTheme() {
      this.themeColor = this.themeColor === '#42b883' ? '#e66767' : '#42b883'
    },
    updateCssVar() {
      document.documentElement.style.setProperty('--theme-color', this.themeColor)
    }
  }
}
</script>

<style>
:root {
  --theme-color: #f0f0f0; /* 默认值 */
}

body {
  background-color: var(--theme-color);
  color: white;
  padding: 20px;
  transition: background-color 0.3s;
}
</style>

局部：

<template>
  <div ref="box" class="dynamic-box">
    <p>局部 CSS 变量示例</p>
    <button @click="increaseSize">增大尺寸</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 100
    }
  },
  methods: {
    increaseSize() {
      this.size += 20
      this.$nextTick(() => {
        // 确保 DOM 已更新（虽然这里没改模板结构，但保险起见）
        const el = this.$refs.box
        if (el) {
          el.style.setProperty('--box-size', this.size + 'px')
        }
      })
    }
  },
  mounted() {
    // 初始化
    this.$refs.box.style.setProperty('--box-size', this.size + 'px')
  }
}
</script>

<style scoped>
.dynamic-box {
  --box-size: 100px;
  width: var(--box-size);
  height: var(--box-size);
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.2s, height 0.2s;
}
</style>

vue3：

全局：

<template>
  <div class="box">Hello, CSS Variables!</div>
  <button @click="changeColor">切换颜色</button>
</template>

<script setup>
import { ref, watch } from 'vue'

const bgColor = ref('#42b883')

// 监听 bgColor 变化，并同步到 :root 的 CSS 变量
watch(bgColor, (newColor) => {
  document.documentElement.style.setProperty('--bg-color', newColor)
})

function changeColor() {
  bgColor.value = bgColor.value === '#42b883' ? '#e66767' : '#42b883'
}
</script>

<style>
:root {
  --bg-color: #f0f0f0; /* 默认值 */
}

.box {
  background-color: var(--bg-color);
  padding: 20px;
  color: white;
  transition: background-color 0.3s;
}
</style>

局部：

<template>
  <div ref="container" class="container">
    <p>局部 CSS 变量控制</p>
    <button @click="updateRadius">增大圆角</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const container = ref(null)
let radius = 10

function updateRadius() {
  radius += 5
  if (container.value) {
    container.value.style.setProperty('--border-radius', `${radius}px`)
  }
}
</script>

<style scoped>
.container {
  --border-radius: 10px;
  border: 2px solid #ccc;
  border-radius: var(--border-radius);
  padding: 16px;
  transition: border-radius 0.2s;
}
</style>