js获取当前节点css,原生js获取元素的样式style属性值

事情是这样的，我今天在帮一个朋友实现原生手写轮播图，然后我发现自己在获取一个元素的样式上出现了一点点小问题，就顺带去谷歌了一番了。

原生js获取CSS样式.png

一 原本的我🤦

问题：

是这样的，一开始需要获取某一个元素的left值，我就用ele.style.left去获取了(基础不扎实还好意思来丢人)，然后居然返回的是空。

好吧，追本溯源，问题的根源以及区别就在这里了。

ele.style 的使用

只读内联样式属性：使用该方法获取的样式值，是元素内联的样式上才有的。举个例子，如果你有一个元素

一个温馨提示：如果真的是使用这种方式去获取属性值，那么需要转换成整数而且去掉单位，那么就可以用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 ，通过计算就可以容易地获得准确的元素大小。