原生 JavaScript 读写 CSS 样式的方法

Question

好久没用原生 JS 写 CSS 样式，差点忘了，记录一下！

1、通过 DOM 节点对象的style对象

var element = document.getElementById('id')
element.style.color = 'red'

2、通过 Element 对象的 setAttribute()、getAttribute()、removeAttribute() 方法

var element = document.getElementById('id')
element.setAttribute('color', 'red')

3、通过 style 对象的 cssText 属性、setProperty()、removeProperty() 方法

var element = document.getElementById('id')
element.style.cssText = 'color: red'
element.style.setProperty('color', 'red', 'important')
element.style.removeProperty('color')
element.style.cssText = ''  // 快速清空该规则的所有声明

4、直接添加样式表

1）创建 style> 标签，内联样式

var style = document.createElement('style')
style.innerHTML = 'body{color: red}'
document.head.appendChild(style)

2）添加外部样式表

var link = document.createElement('link')
link.setAttribute('rel', 'stylesheet')
link.setAttribute('type', 'text/css')
link.setAttribute('href', 'reset-min.css')
document.head.appendChild(link)