如题
元素属性
类名
1 2 3
| var ele = document.getElementById('id') ele.className = 'one-class'
|
这种方法比较简陋, 不推荐使用
1 2 3 4 5
| var classList = ele.classList classList.add('active') classList.remove('active') classList.toggle('active') classList.forEach(class => console.log(class)) // 遍历
|
classList内置操作类名的方法, 非常适用动态添加/删除类名, 推荐使用
内联样式
1 2
| ele.style.cssText = 'width: 100px; height: 100px;' ele.style.cssText = '-webkit-transform: translateY(50px)'
|
就像在写css一样, 缺点是这样写会覆盖之前所有的内联样式, 因此只想修改一个css属性时, 推荐使用下面的方法
1 2
| ele.style.position = 'relative' ele.style.left = '100px'
|
注意这种写法每次赋值都会触发reflow, 对渲染性能会造成很大的负面影响, 因此不可滥用, 能用classList解决的就不要用style
样式表
styleSheets
1 2 3 4
| var sheet = document.styleSheets[0] st.addRule('body', 'text-align: center; width: 100px;') var len = sheet.rules.length st.deleteRule(len - 1)
|
这种写法, 样式添加在外联样式中
link
假设html中有如下代码
1
| <link rel="stylesheet" href="/css/style.css" id="css">
|
1 2 3 4 5 6
| var cssLink = document.getElementById('css') cssLink.href = '/css/another.css'
|
1 2 3 4 5 6
| var link = document.createElement('link') link.setAttribute('rel', 'stylesheet') link.setAttribute('href', '/path/style.css') document.body.appendChild(link)
|
另外, 动态加载新的脚本也同理
1 2 3 4 5
| var script = document.createElement('script') script.setAttribute('src', '/path/script.js') document.body.appendChild(script)
|