JS 动态设置css样式

文章来源 ：https://juejin.im/post/5de6f6346fb9a0160e29fae6

1.0 内联样式 : 通过行内样式.style 属性 来编辑给定的HTMLElement的内联样式

let el = document.createElement('div') ;
01) . el.style.backgroundColor = "black' ;
02) . el.style.cssText = "background-color:red,border:1px solid green;" ; //该种方法用于设置多个复杂样式
03) . el.setAttribute('style','background-color:black')
04) . Object.assgin(el.style{ //->该种方法用于设置内联样式过于繁琐的dom样式
backgroundColor : 'red',
fontSize : 10+'px'
})

image.png

image.png

CSSStyleDeclaration 接口中方法 :

*注意 ：接口中方法只针对于元素的行内样式生效 在css 中写的样式不生效 *；

1. Object.getPropertyValue(propertyname) :propertyname参数: 是一个字符串, 表示要检测的属性名; 返回值是属性对应的属性值 ;
2. Object.getPropertyPriority(propertyname) : 返回值是！important;

   1. Object.removeProperty(propertyname) : propertyName :一个字符串，表示要移除的属性名。 返回值是字符串 移除的属性名
      // 要移除的属性名 之前
      style.removeProperty('height')

      
      
      

      image.png
      
      

      //移除之后
      style.removeProperty('height')

      
      
      

      image.png
      
      完整代码部分展示
      
      

      image.png
      
      
      

      image.png

2 . css 类

1. className
   -1.el.className = '' ''
   
   

   image.png
   
   
   

   image.png
   
   
   

   image.png
   
   -2.el.setAttribute(“class”,“ 属性值”)
   
   

   image.png
   
   
   

   image.png
   
   添加多个属性值 ： el.setAttribute(“class”，“属性值1 属性值2 ……” )

2. classList

   
   
   

   image.png
   
   
   

   image.png
   
   

   classList 中的方法如下 ：
   eg ： element.classList.add()

image.png