动态仅你可见什么意思（动态设置css）

        相信写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的方法  个人觉得应用起来更加灵活





















，当然也不是绝对的              ，还是得看使用场景来选择
 
 
 
 
 
 
 
。