【笔记】归纳js，getcomputedStyle,，currentStyle，以及其相...

一、 前言

在前端开发中，经常需要获取某个元素的样式值，比如颜色、字体大小、宽度等等。这时候，就需要使用到getComputedStyle和currentStyle这两个API了。本文将对这两个API进行详细介绍，并且提供一些使用方法和案例。

二、 getComputedStyle和currentStyle的区别

getComputedStyle和currentStyle都是用来获取元素的最终样式值的，但是它们之间还是有一些区别的。

1. 浏览器支持不同

getComputedStyle是W3C规范中提出的，目前主流浏览器（IE9及以上、Chrome、Firefox、Safari等）都支持该API。

而currentStyle则是IE独有的API，其他浏览器并不支持。在现代前端开发中，我们很少使用currentStyle，而是更倾向于使用getComputedStyle。

2. 获取元素对象的方式不同

getComputedStyle需要传入一个元素对象，而currentStyle则是在元素对象上直接调用。

// getComputedStyle

var ele = document.getElementById('ele');

var style = window.getComputedStyle(ele, null);

// currentStyle

var ele = document.getElementById('ele');

var style = ele.currentStyle;

3. 获取样式属性值的方式不同

getComputedStyle和currentStyle在获取样式属性值的方式上也有一定的区别。

getComputedStyle获取样式属性值的方式为：

var value = getComputedStyle(ele, null).getPropertyValue('property');

其中，ele是需要获取样式属性值的元素对象，'property'是需要获取的样式属性名，value为对应的样式属性值。

currentStyle获取样式属性值的方式为：

var value = ele.currentStyle['property'];

其中，ele是元素对象，'property'为样式属性名，value为对应的样式属性值。

4. 获取伪元素的样式

getComputedStyle可以获取伪元素的样式，只需要在getPropertyValue方法中加入伪元素的名称即可。例如：

// 获取元素ele中伪元素before的content属性的值

var value = window.getComputedStyle(ele, ':before').getPropertyValue('content');

而currentStyle则不支持获取伪元素的样式。

5. 获取计算样式

getComputedStyle获取的是元素的计算样式（computed style），也就是浏览器最后呈现在页面上的样式。如果样式没有通过样式表定义，而是由浏览器默认设置的，则获取的就是浏览器的默认设置值。

currentStyle则获取的是基于Windows系统显示设置的样式（如系统字体大小、颜色等）在元素基础样式上的结果，有些并不是最终呈现样式，在某些情况下，获取的样式与计算样式相差较大。

三、 getComputedStyle的使用方法

getComputedStyle是现代前端开发中最常用的获取最终样式值的方法之一。下面是它的使用方法：

var ele = document.getElementById('ele'); //获取需要获取样式值的元素对象

var style = window.getComputedStyle(ele, null); //获取计算样式，无第二个参数时默认为null

var value = style.getPropertyValue('property'); //获取样式属性值

其中，ele是需要获取样式值的元素对象，style为计算样式对象，value为对应样式属性的值，'property'为需要获取的样式属性名。

除了getPropertyValue方法，还有另外两个获取样式属性值的方法：

（1）通过style对象属性获取

var ele = document.getElementById('ele');

var style = window.getComputedStyle(ele, null);

var value = style.property; //property为对应的样式属性名

（2）通过数组方式获取

var ele = document.getElementById('ele');

var style = window.getComputedStyle(ele, null);

var value = style['property']; //'property'为需要获取的样式属性名

需要注意的是，样式属性名在JS中是以驼峰式命名的，比如background-color应写为backgroundColor。

四、 currentStyle的使用方法

currentStyle在现代前端开发中并不常用，仅在IE6~8中使用较多。下面是它的使用方法：

var ele = document.getElementById('ele'); //获取需要获取样式值的元素对象

var value = ele.currentStyle['property']; //'property'为需要获取的样式属性名

其中，ele是需要获取样式值的元素对象，'property'为需要获取的样式属性名，value为对应的属性值。

需要注意的是，currentStyle不支持获取伪元素的样式。

五、 案例说明

1. 获取元素的字体大小

var ele = document.getElementById('ele');

var style = window.getComputedStyle(ele, null);

var fontSize = style.getPropertyValue('font-size');

console.log(fontSize); //16px

2. 获取元素的背景色

var ele = document.getElementById('ele');

var style = window.getComputedStyle(ele, null);

var bgColor = style.getPropertyValue('background-color');

console.log(bgColor); //rgb(255, 0, 0)

3. 获取元素的边框宽度

var ele = document.getElementById('ele');

var style = window.getComputedStyle(ele, null);

var borderWidth = style.getPropertyValue('border-width');

console.log(borderWidth); //3px

4. 获取元素内边距值

var ele = document.getElementById('ele');

var style = window.getComputedStyle(ele, null);

var padding = style.getPropertyValue('padding');

console.log(padding); //10px

5. 获取元素的盒模型宽度

var ele = document.getElementById('ele');

var style = window.getComputedStyle(ele, null);

var width = style.getPropertyValue('width');

console.log(width); //100px

console.log(ele.offsetWidth); //116

在这个案例中，元素div的实际宽度是100+10左右的内边距+3+3的边框宽度，但是由于设置了box-sizing: border-box属性，实际宽度就是设置的100px。

六、 总结

getComputedStyle和currentStyle都是获取元素最终样式值的API，但是getComputedStyle更为通用，且可以获取伪元素的样式值，是现代前端开发中使用最为广泛的方法之一，建议开发者尽量使用getComputedStyle来获取最终样式值。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/