js修改元素样式的九种方式总结
作者：冰糖雪梨dd
用惯了vue和react之后可能会慢慢淡忘掉原生的一些操作dom的几种方式,有的时候确实需要我们通过原生的方式进行操作,下面这篇文章主要给大家介绍了关于js修改元素样式的九种方式,需要的朋友可以参考下
1.直接设置style的属性
style属性可以设置或返回元素的内联样式,对于更改同一个元素的同一种样式，设置style属性的优先级较高
- 语法：element.style.property = value
- property为CSS属性名，如：color，margin。如果属性名原来包含“-”，则需转换为小驼峰形式，如：backgroundColor，marginLeft。
var box = document.querySelector('div')
box.style.color = "#fff" // 将元素中文字设置为白色
box.style.marginLeft = "100px" // 将元素左外边距设置为100px
某些情况用这个设置 !important值无效
如果属性有’-'号，就写成驼峰的形式（如textAlign） 如果想保留 - 号，就中括号的形式
element.style.height = '100px';
2.直接设置属性
只能用于某些属性，相关样式会自动识别
element.setAttribute('height', 100);
element.setAttribute('height', '100px');
3.设置style的属性
element.setAttribute('style', 'height: 100px !important');
4.使用setProperty
- 如果要设置!important，推荐用这种方法设置第三个参数
element.style.setProperty('height', '300px', 'important');
5.改变class （推荐）
- 通过改变伪元素父级的class来动态更改伪元素的样式
element.className = 'blue'; element.className += 'blue fb';
6.设置cssText
element.style.cssText = 'height: 100px !important'; element.style.cssText += 'height: 100px !important';
7.引入css样式文件
- 创建引入新的css样式文件
function addNewStyle(newStyle) {
var styleElement = document.getElementById('styles_js');
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>styleElement<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> styleElement <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'style'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> styleElement<span class="token punctuation">.</span>type <span class="token operator">=</span> <span class="token string">'text/css'</span><span class="token punctuation">;</span> styleElement<span class="token punctuation">.</span>id <span class="token operator">=</span> <span class="token string">'styles_js'</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">'head'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>styleElement<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> styleElement<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>newStyle<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">addNewStyle</span><span class="token punctuation">(</span><span class="token string">'.box {height: 100px !important;}'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 8.使用addRule、insertRule
// 在原有样式操作
document.styleSheets[0].addRule('.box', 'height: 100px');
document.styleSheets[0].insertRule('.box {height: 100px}', 0);
<span class="token comment">// 或者插入新样式时操作</span> <span class="token keyword">var</span> styleEl <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'style'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> styleSheet <span class="token operator">=</span> styleEl<span class="token punctuation">.</span>sheet<span class="token punctuation">;</span> styleSheet<span class="token punctuation">.</span><span class="token function">addRule</span><span class="token punctuation">(</span><span class="token string">'.box'</span><span class="token punctuation">,</span> <span class="token string">'height: 100px'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> styleSheet<span class="token punctuation">.</span><span class="token function">insertRule</span><span class="token punctuation">(</span><span class="token string">'.box {height: 100px}'</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span>head<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>styleEl<span class="token punctuation">)</span><span class="token punctuation">;</span> 9.通过classList控制样式
- classList属性返回一个元素类属性集合（这里可以简单理解为类名的集合），通过使用classList中的方法可以方便的访问和控制元素类名，达到控制样式的目的
classList常用方法介绍：
| 名称 | 描述 |
|---|---|
add(class1, class2, …) | 添加一个或多个类名 |
remove(class1, class2, …) | 移除一个或多个类名 |
replace(oldClass, newClass) | 替换类名 |
contains(class) | 判定类名是否存在，返回布尔值 |
toggle(class, true|false) | 如果类名存在，则移除它，否则添加它，第二个参数代表无论类名是否存在，强制添加（true）或删除（false） |
<div class="box">classList test</div>
<script>
var box = document.querySelector('.box')
box.classList.add('box1', 'box2') // [box] => [box, box1, box2]
box.classList.remove('box1', 'box2') // [box, box1, box2] => [box]
box.classList.replace('box', 'box2') // [box] => [box2]
box.classList.contains('box1') // 当前元素不包含类名box1，返回false
box.classList.toggle('active') // [box2] => [box2, active]
</script>总结
到此这篇关于js修改元素样式的九种方式的文章就介绍到这了,更多相关js修改元素样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！