动态设置css

发布时间：2023-04-26 文章分类：WEB开发, 电脑百科 投稿人：赵颖 字号： 默认 | 大 | 超大 打印

        相信写css 的小伙伴 都有一个诉求，恨不得css随心所欲，我想他是啥就是啥，动态样式，不想写死，下面是几种动态设置css样式，个人感觉最有趣的 放在最后一个。

  1.         jquery 或者 原生js操作dom元素，提前在<style>写好calss样式
        通过方法         addClass()-向被选元素添加一个或多个类
                        removeClass()-从被选元素删除一个或多个元素
                        toggleClass()-对被选元素进行添加/删除类的切换操作
                        css()-设置或返回样式属性

    2.        vue 通过动态 :class"{myClass = true}" 其中 myClass 为 自己在<style>中定义好的 样式 true 代表启用 myClass 这个样式，false 代表不适用myClass 这个样式

<template>
  <span :class="{myClass=isShow}"></span> // 通过修改isShow 来决定是否启用myClass这个样式
</template>
<script>
export default {
    data(){
      return {
         isShow:false 
       }
    }
}
</script>
<style>
 .myClass {
    color:red
}
</style>

        上面的两种动态设置css 样式的方法 大同小异，都是提前定义好 需要使用的样式，然后通过添加或者启用 移除或者废除的方式 动态设置。

        在此，思考一个问题， 我需要动态设置 其中一个css属性的值，例如 margin-top 的值，难道我提前在style中提前设置好类样式，然后一个一个判断来使用？显然不适合。

当然，如果是vue之类的前端框架的话，也可以通过 绑定动态行内样式:style=“`margin-top:${value}`”的方式进行动态设置margin-top的值，除此之外 还有一种 类似的方式：

        在style中 是可以设置 变量的 ，例如：

<style>
  .test {
     --my-color:red;
     color:var(--my-color);
   }
</style>

上述方法， 使用.test 样式的 元素 便能 得到color为red的样式    而我们要做到动态设置color 的目的，只需要去修改--my-color这个属性值    在此做个测试

<span style="--my-color:green">

 在行内样式，修改--my-color 这个属性，发现 span元素的文字变成了green

到了这里，相信会有些感觉，这种方法 和 vue 中 :style=“`margin-top:${value}`”有着异曲同工之妙

区别在于：

        :style=“`margin-top:${value}`“ 这种方式 可以说是独立的，也可以说是额外为元素设置一个css属性

       :style="`--my-color:${value}`" 这种方式 其中--my-color 变量 是应用在 style中的 定义好的选择器样式，若 多个选择器都使用了该变量，那么修改--my-color 便能将所有使用该变量的值 都修改

个人：

        第三种动态设置css的方法  个人觉得应用起来更加灵活，当然也不是绝对的，还是得看使用场景来选择。

标签 , ,