原生js获取元素的样式style属性值
事情是这样的，我今天在帮一个朋友实现原生手写轮播图，然后我发现自己在获取一个元素的样式上出现了一点点小问题，就顺带去谷歌了一番了。
原生js获取CSS样式.png
一 原本的我🤦
问题：
是这样的，一开始需要获取某一个元素的left值，我就用ele.style.left去获取了（基础不扎实还好意思来丢人），然后居然返回的是空。
好吧，追本溯源，问题的根源以及区别就在这里了。
ele.style 的使用
- 只读内联样式属性：使用该方法获取的样式值，是元素内联的样式上才有的。举个例子，如果你有一个元素
<div style='color:red，left:40px'></div>,那么你获取这个元素的样式，ele.style.color 就会返回left,如果使用ele.style.left就会返回40px;
一个温馨提示：如果真的是使用这种方式去获取属性值，那么需要转换成整数而且去掉单位，那么就可以用parseInt(40px)，就会返回40- 可读可写：该方法可以同时设置或者获取某一个元素的样式 （记住，只能读取定义的style样式里的属性。）
所以，我那样是获取不到某一个元素的一个其他方式设置的样式属性值的，所以我就打算谷歌一下别的方法了。
window.getComputedStyle() 与getPropertyValue
image.png
嗯，很不错，这个方法可以获取一个元素的所有来自四面八方设置的样式属性，本身的属性都可以被我们读取到。
💁 那么，问题来了，如果要读取其中的一个值，我们应该怎么做呢？
getPropertyValue
// 基本语法
getComputedStyle(document.getElementById('caseroul'),null).getPropertyValue(‘left’)
特点：
- 只可读，但是可以读取所有的样式属性值。但是不能通过该方法去设置样式属性值。
css中设置样式属性的一些方法:
elt.style.cssText = "color: blue"; // 设置多个样式属性
elt.setAttribute("style", "color: blue"); // 设置多个样式属性
elt.style.color = "blue"; // 直接设置样式属性
var st = elt.style; st.color = "blue"; // 间接设置样式属性
2 IE下的currentStyle 与 getAttribute
currentStyle获取的是一个元素的所有的样式属性值，这一点功能是与getComputedStyle()一样的，但是在获取某一个具体的属性的时候，可以结合getAttribute来实现。
和 getComputedStyle 方法不同的是，currentStyle 要获得属性名的话必须采用驼峰式的写法。也就是如果我需要获取 font-size 属性，那么传入的参数应该是 fontSize。因此在IE 中要获得单个属性的值，就必须将属性名转为驼峰形式。(感谢这篇文章。)
// IE 下语法：
// IE 下将 CSS 命名转换为驼峰表示法
// font-size --> fontSize
// 利用正则处理一下就可以了
function camelize(attr) {
// /\-(\w)/g 正则内的 (\w) 是一个捕获，捕获的内容对应后面 function 的 letter
// 意思是将 匹配到的 -x 结构的 x 转换为大写的 X (x 这里代表任意字母)
return attr.replace(/\-(\w)/g, function(all, letter) {
return letter.toUpperCase();
});
}
// 使用 currentStyle.getAttribute 获取元素 element 的 style 属性样式
element.currentStyle.getAttribute(camelize(style));
关于返回值
关于getComputedStyle返回的值，具体查看这里。
不管你最初定义的样式是什么，涉及到宽度高度之类的，返回的都是最后实际使用的宽度和高度。
image.png
image.png
关于ele.style的返回值，是和定义的样式的值相等的，如果设置为auto，就直接返回auto。
const test = document.querySelector('.test');
console.log(test.offsetWidth, '获取offsetWidth的宽度'); // 204,包括边框的宽度
console.log(getComputedStyle(test, null).getPropertyValue('width')); // 200px，实际的样式宽度
console.log(test.getBoundingClientRect().right - test.getBoundingClientRect().left) // 200
console.log(test.style.width); //无返回值。
然后是元素的高宽，对于一个没有设定高宽的元素而言，在 IE678 下使用 getPropertyValue("width|height") 得到的是 auto 。而标准浏览器会直接返回它的 px 值，当然我们希望在 IE 下也返回 px 值。
这里的 HACK 方法是使用 element.getBoundingClientRect() 方法。
element.getBoundingClientRect() -- 可以获得元素四个点相对于文档视图左上角的值 top、left、bottom、right ，通过计算就可以容易地获得准确的元素大小。
