JS之DOM篇脚本化行内样式

脚本化CSS，指的是使用JS操作CSS；脚本化行内样式，指的是用JS操作行内样式，行内样式也叫作内联样式

基础

元素节点提供style属性，用来操作CSS行内样式，style属性指向CSSStyleDeclaration对象

<div id="box" style=" 30px;height: 30px;"></div>
<script>
  console.log(box.style instanceof CSSStyleDeclaration) // true
</script>

style属性是一个可读写属性。在读模式下，返回元素的行内CSS样式，如果读取没有设置过的行内样式将返回空字符串；在写模式下，会替换原来的行内样式

<div id="box" style=" 30px;height: 30px;"></div>
<script>
  console.log(box.style.width) // 30px
  console.log(box.style.color === '') // true 
  box.style.width = '50px'
  console.log(box.style.width) // 50px
</script>

如果CSS属性名包含一个或多个连字符，需要将每个连字符后面紧接着的字母大写，并移除连字符。

<div id="box" style="font-size: 26px;"></div>
<script>
  console.log(box.style.fontSize) // '26px'
</script>

如果需要操作行间样式，可以使用元素节点的特性操作方法hasAttribute()、getAttribute()、setAttribute()、removeAttribute()等操作style属性

<div id="box" style=" 30px;height: 30px;"></div>
<script>
  console.log(box.hasAttribute('style')) // true
  console.log(box.getAttribute('style')) // ' 30px;height: 30px;'
  
  box.setAttribute('style', ' 50px;color: red;')
  console.log(box.getAttribute('style')) // ' 50px;color: red;'
  
  box.removeAttribute('style')
  console.log(box.hasAttribute('style')) // false
  console.log(box.getAttribute('style')) // null 
</script>

属性

cssText

cssText属性能够访问到style特性中的CSS代码。在读模式下，cssText返回浏览器对style特性中CSS代码的内部表示；在写模式下，赋给cssText的值会重写整个style特性的值

<div id="test" style=" 30px;height: 30px;"></div>
<script>
  console.log(test.style.cssText) // ' 30px;height: 30px;'
  test.style.cssText = 'color: red'
  console.log(test.style.cssText) // 'color: red'
</script>

length

length属性返回内联样式中的样式个数

<div id="test" style=" 30px;height: 30px;"></div>
<script>
  console.log(test.style.length) // 2
</script>

parentRule

parentRule属性表示CSS信息的CSSRule对象

<div id="test" style=" 30px;height: 30px;color: red;"></div>
<script>
  console.log(test.style.parentRule) // null
</script>

方法

item()

item()方法返回给定位置的CSS属性的名称，也可以使用方括号语法

<div id="test" style=" 30px;height: 30px;color: red;"></div>
<script>
  console.log(test.style.item(0)) // 'width'
  console.log(test.style[0]) // 'width'
</script>

getPropertyValue()

getPropertyValue()方法返回给定属性的字符串值

<div id="test" style=" 30px;height: 30px;background-color: red;"></div>
<script>
  console.log(test.style.getPropertyValue('background-color')) // 'red'
  console.log(test.style['background-color']) // 'red'
  console.log(test.style['backgroundColor']) // 'red'
  console.log(test.style.backgroundColor) // 'red'
</script>

getPropertyPriority()

如果给定的属性使用了!important设置，则返回important；否则返回空字符串

<div id="test" style=" 30px;height: 30px !important;background-color: red;"></div>
<script>
  console.log(test.style.getPropertyPriority('height')) // 'important'
  console.log(test.style.getPropertyPriority('width')) // ''
</script>

setProperty()

setProperty(propertyName,value,priority)方法将给定属性设置为相应的值，并加上优先级标志("important"或一个空字符串)，该方法无返回值

<div id="test" style=" 30px;height: 30px !important;background-color: red;"></div>
<script>
  test.style.setProperty('height', '40px', 'important')
  console.log(test.style.height) // '40px'
  
  test.style.setProperty('height', '50px')
  console.log(test.style.height) // '50px'
</script>

removeProperty()

removeProperty()方法从样式中删除给定属性，并返回被删除属性的属性值

<div id="test" style=" 30px;height: 30px !important;background-color: red;"></div>
<script>
  console.log(test.style.removeProperty('height')) // '30px'
  console.log(test.style.height) // ''
</script>

模块侦测

不同浏览器的不同版本，对CSS模块的支持情况都不一样。有时候需要知道当前浏览器是否支持某个模块，这就叫做“CSS模块的侦测”

可以通过判断某个DOM元素的style对象的某个属性值是否为字符串。如果该CSS属性确实存在，会返回一个字符串。即使该属性实际上并未设置，也会返回一个空字符串。如果该属性不存在，则会返回undefined

<div id="test"></div>
<script>
  // 支持animation的浏览器返回''，不支持的浏览器返回undefined
  console.log(test.style.animation)
</script>