js之dom元素样式操作
原创
一、元素的样式的获取
二、style的设置
三、获取dom元素的非行内样式
四、window.getComputedStyle() 方法的使用
1. getComputedStyle() 用法
2. 返回值
3. 和 style 的异同
4. 兼容性
一、元素的样式的获取
<style>
.btn{
background-color: orangered;
}
</style>
<button class="btn list" name="but" id="data" style="width: 100px;height: 30px;line-height:30px;">
按钮
</button>
<script>
var btn = document.getElementsByName("but")[0];
console.log(btn.style);//获取的全是行内样式
console.log(btn.style.width);
console.log(btn.style.height);
console.log(btn.style.backgroundColor);
</script>原生js操作样式只能操作元素的行内样式
二、style的设置
原生js可以单独设置元素的行内样式。
btn.style.width = "200px";
btn.style = "width:120px;height: 30px;color:white;";三、获取dom元素的非行内样式
非行内样式只能获取不能设置。
原生js操作的都是行内样式，那么怎么获取非行内样式呢？
window.getComputedStyle(Element);------获取电脑上的样式
console.log(window.getComputedStyle(btn));//CSSStyleDeclaration
console.log(window.getComputedStyle(btn).backgroundColor);
window.getComputedStyle(btn).width = "200px";会报错，这个方法只能获取非行内样式，不能设置样式，read-only 只读的
四、window.getComputedStyle() 方法的使用
1. getComputedStyle() 用法
document.defaultView.getComputedStyle(element[,pseudo-element]);
或者window.getComputedStyle(element[,pseudo-element]);
首先是有两个参数，元素和伪类。第二个参数不是必须的，当不查询伪类元素的时候可以忽略或者传入 null。
2. 返回值
getComputedStyle 返回的对象是 CSSStyleDeclaration 类型的对象。取数据的时候可以直接按照属性的取法去取数据，例如 style.backgroundColor。需要注意的是，返回的对象的键名是 css 的驼峰式写法，background-color -> backgroundColor。
3. 和 style 的异同
getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法，均需要注意 float 属性。
而不同点就是：
element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式。
4. 兼容性
关于 getComputedStyle 的兼容性问题，在 Chrome 和 Firefox 是支持该属性的，同时 IE 9 10 11 也是支持相同的特性的，IE 8并不支持这个特性。 IE 8 支持的是 element.currentStyle 这个属性，这个属性返回的值和 getComputedStyle 的返回基本一致，只是在 float 的支持上，IE 8 支持的是 styleFloat,这点需要注意。
js改变DOM样式的三种方式
方法一：
最简单也是最直接的方法就是直接修改DomNode的style属性：
如下面的代码`
var node = document.getElementById('node');
node.style.color = 'red';方式二：
因为表现应该是表现层的也就是css所所的事，所以可以这样代码如下：
var node = document.getElementById('node');
node.className = 'testStyle';方法三：
上面两个方式都不适用于批量处理；接下来是第三种代码如下
<script type="text/javascript">
//创建一个结点，把传入的参数当作样式
function addStyleNode(str){
var styleNode = document.createElement('style');
styleNode.type = 'text/css';
if(styleNode.styleSheet){
styleNode.styleSheet.cssText = str;//ie下要通过style.cssText进行写操作
}else{
styleNode.innHTML = str;//firefox可以直接对innHTML进行操作
}
document.getElementsByTagName('head')[0].appendChild(styleNode);
}
addStyleNode('span{font-size:40px;background:#000,color:#fff} #test{color:red}');
</script>这就是以上三点方式，大家可以根据实际需要选择合适的。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。