相信写css 的小伙伴 都有一个诉求，恨不得css随心所欲，我想他是啥就是啥，动态样式，不想写死，下面是几种动态设置css样式，个人感觉最有趣的 放在最后一个。
- 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的方法 个人觉得应用起来更加灵活，当然也不是绝对的，还是得看使用场景来选择。