位置: IT常识 - 正文
动态设置css(动态设置窗体记录源属性)
发布时间：2024-01-17推荐整理分享动态设置css(动态设置窗体记录源属性)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:动态设置仅一人可见 他可能会看不到吗,动态设置窗体记录源为查询对象,动态设置仅一人可见 他可能会看不到吗,动态设置css样式,动态设置css样式,动态设置css变量,动态设置css样式,动态设置css@page landscape,内容如对您有帮助，希望把文章链接给更多的朋友！
相信写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的方法 个人觉得应用起来更加灵活，当然也不是绝对的，还是得看使用场景来选择。
上一篇：CSS中哪些属性可继承，哪些不可以？(css中哪些属性可以使用)
下一篇：【Javaweb】会话跟踪技术Cookie&Session(javaweb会话跟踪技术有哪些)
