js变量控制css样式

最新推荐文章于 2024-03-15 16:56:39 发布

lazy_tomato

最新推荐文章于 2024-03-15 16:56:39 发布

阅读量789

点赞数

分类专栏： javascript 文章标签： javascript css 前端

本文链接：https://blog.csdn.net/wswq2505655377/article/details/127620880

版权

javascript 专栏收录该内容

44 篇文章 3 订阅

订阅专栏

start

记录一下，如何使用 js 代码控制样式。

css3 自带的 var

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      body {
        --themeColor: tomato;
      }

      .item {
        background-color: var(--themeColor);
      }
    </style>
  </head>

  <body>
    <div class="item">123</div>
  </body>
</html>

Vue 中通过 JS 控制样式

<template>
  <div :style="customStyle">
    <div class="lazy">
      我是番茄
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return { customBackGround: '' }
  },
  somputed: {
    // 自定义样式
    customStyle() {
      return {
        '--bgColor': this.customBackGround
        // '--currentThemeColor': this.$store.state.themeModule.theme.currentThemeColor.color
      }
    }
  }
}
</script>

<style>
.lazy {
  background: var(--bgColor);
  border-color: var(--bgColor);
}
</style>

第三方插件 css-vars-ponyfill

在考虑各种浏览器的兼容性问题的情况下，考虑使用第三方库：css-vars-ponyfill；

第三方库github地址点击此处

在 vue 中的使用案例

<template>
  <div :style="customStyle">
    <div class="lazy">
      我是番茄
    </div>
  </div>
</template>

<script>
import cssVars from 'css-vars-ponyfill'

export default {
  data() {
    return { customBackGround: '' }
  },
  created() {
    cssVars({
      onlyLegacy: true,
      variables: {
        '--bgColor': this.customBackGround
        // '--currentThemeColor': this.$store.state.themeModule.theme.currentThemeColor.color
      }
    })
  }
}
</script>

<style>
.lazy {
  background: var(--bgColor);
  border-color: var(--bgColor);
}
</style>