原生js获取元素样式值
Posted 陈明超
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js获取元素样式值相关的知识，希望对你有一定的参考价值。
在学习js初期，就一直有一个疑问，获取元素样式的值，不是直接使用obj.style.left之类的就可以得到了吗？可是使用这样的方式，有的时候能够获取得到，有的时候又不能获取，一直疑惑不已，但是由于以前学习态度的问题，也没有深究，今天专门花了点时间整理了一下这方面的知识。
样式
首先，我们要明确样式的种类有以下三种
- 内联样式： 也就是行内样式，直接写在DOM元素的style属性中
- 嵌入样式： 写在html页面中的<style></style>中的样式
-
外部样式： 由link标签引入的css文件中的样式
优先级：内联 > 嵌入 > 外部
首先，先写一个例子来测试一下通过style方法获取元素样式的值，思路是，一个样式写在行内，一个样式写在style标签中，一个样式由link引入
<head>
<meta charset="UTF-8">
<title>get style</title>
<style>
<!-- 嵌入样式 -->
.box {
height: 200px;
}
</style>
<!-- 引入外部样式 -->
<link rel="stylesheet" href="./index.css">
</head>
<body>
<!-- 行内样式 -->
<div class="box" style="width: 100px;"></div>
</body>// index.css
.box { background-color: orange; }// javascript
var box = document.getElementsByClassName(‘box‘)[0];
console.log(box.style.width);
console.log(box.style.height);
console.log(box.style.backgroundColor);得到的结果为：
‘100px‘
‘‘
‘‘因此我们可以看到height值和backgroundColor值没有被获取到，所以我们得到以下结论：
style只能获取行内样式的值，无法获取嵌入式样式和外部样式的值
那么嵌入式样式和外部样式的值应该怎么办呢，看下面代码
// currentStyle: IE下获取元素样式的值
if ( box.currentStyle ) {
console.log( ‘this is IE.‘ );
console.log( box.currentStyle.width );
console.log( box.currentStyle.height );
console.log( box.currentStyle.backgroundColor );
} else {
// chorme and firefox
console.log( document.defaultView.getComputedStyle(box, false).width );
console.log( document.defaultView.getComputedStyle(box, fasle).height );
console.log( document.defaultView.getComputedStyle(box, false).backgroundColor );
}输出结果
‘this is IE.‘
‘100px‘
‘200px‘
‘orange‘分别在IE, chrome, firefox下测试一下，最后都能够获取所有的属性。非常好，于是我们可以得出结论
获取元素样式值的最佳方式，就是通过obj.currentStyle 或者document.defaultView.getComputedStyle( obj, false ) 的方式，其中前者适用于IE，后者适用于chrome和Firefox
因此我们可以写一个获取元素样式值的方法
var getStyle = function(obj, key) {
return obj.currentStyle ? obj.currentStyle[key] : document.defaultView.getComputedStyle( obj, false )[key];
}以上是关于原生js获取元素样式值的主要内容，如果未能解决你的问题，请参考以下文章