JS修改样式方法总结

如题

元素属性

类名

• className

var ele = document.getElementById('id') // 后面的代码都用这个ele变量
ele.className = 'one-class'
// ele.setAttribute('class', 'another-class')

这种方法比较简陋, 不推荐使用

• classList

var classList = ele.classList
classList.add('active') // 添加一个类
classList.remove('active') // 删除一个类
classList.toggle('active') // 切换一个类
classList.forEach(class => console.log(class)) // 遍历

classList内置操作类名的方法, 非常适用动态添加/删除类名, 推荐使用

内联样式

• style.cssText

ele.style.cssText = 'width: 100px; height: 100px;'
ele.style.cssText = '-webkit-transform: translateY(50px)' // 前面的width/height设置丢失了, 并且-webkit前缀无效

就像在写css一样, 缺点是这样写会覆盖之前所有的内联样式, 因此只想修改一个css属性时, 推荐使用下面的方法

• style.${attribute}

ele.style.position = 'relative'
ele.style.left = '100px' // position属性仍在

注意这种写法每次赋值都会触发reflow, 对渲染性能会造成很大的负面影响, 因此不可滥用, 能用classList解决的就不要用style

样式表

styleSheets

var sheet = document.styleSheets[0]
st.addRule('body', 'text-align: center; width: 100px;')
var len = sheet.rules.length
st.deleteRule(len - 1)

这种写法, 样式添加在外联样式中

link

• 修改已有的外联样式路径

假设html中有如下代码

<link rel="stylesheet" href="/css/style.css" id="css">

var cssLink = document.getElementById('css')
cssLink.href = '/css/another.css'

// 或使用下的方法
// var cssLink = document.getElementsByTagName('link')[0]
// cssLink.setAttribute('href', '/css/another.css')

• 加载新的外联样式

var link = document.createElement('link')
// link.setAttribute('type', 'text/css') // 可以不写
link.setAttribute('rel', 'stylesheet')
link.setAttribute('href', '/path/style.css')

document.body.appendChild(link) // 谁当父节点可以看具体需求

另外, 动态加载新的脚本也同理

var script = document.createElement('script')
// script.setAttribute('type', 'text/javascipt') 可以不写
script.setAttribute('src', '/path/script.js')

document.body.appendChild(script)