原生js获取元素的样式style属性值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js获取元素的样式style属性值相关的知识，希望对你有一定的参考价值。
参考技术A 是这样的，一开始需要获取某一个元素的 left 值，我就用 ele.style.left 去获取了（基础不扎实还好意思来丢人），然后居然返回的是空。
好吧，追本溯源，问题的根源以及区别就在这里了。
所以，我那样是获取不到某一个元素的一个其他方式设置的样式属性值的，所以我就打算谷歌一下别的方法了。
特点：
- 只可读，但是可以读取所有的样式属性值。但是不能通过该方法去设置样式属性值。
currentStyle 获取的是一个元素的所有的样式属性值，这一点功能是与 getComputedStyle() 一样的，但是在获取某一个具体的属性的时候，可以结合 getAttribute 来实现。
和 getComputedStyle 方法不同的是，currentStyle 要获得属性名的话必须采用驼峰式的写法。也就是如果我需要获取 font-size 属性，那么传入的参数应该是 fontSize。因此在IE 中要获得单个属性的值，就必须将属性名转为驼峰形式。 ( 感谢这篇文章。 )
关于 getComputedStyle 返回的值，具体查看这里。
不管你最初定义的样式是什么，涉及到宽度高度之类的，返回的都是最后实际使用的宽度和高度。
关于 ele.style 的返回值，是和定义的样式的值相等的，如果设置为auto，就直接返回auto。
然后是元素的高宽，对于一个没有设定高宽的元素而言，在 IE678 下使用 getPropertyValue("width|height") 得到的是 auto 。而标准浏览器会直接返回它的 px 值，当然我们希望在 IE 下也返回 px 值。
这里的 HACK 方法是使用 element.getBoundingClientRect() 方法。
element.getBoundingClientRect() -- 可以获得元素四个点相对于文档视图左上角的值 top、left、bottom、right ，通过计算就可以容易地获得准确的元素大小。
参考链接 chokcoco的博客园
原生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获取元素的样式style属性值的主要内容，如果未能解决你的问题，请参考以下文章