原生JavaScript获取元素样式的五种方法详解

原生JavaScript获取元素样式概述

在Web开发中，经常需要通过JavaScript读取或修改DOM元素的样式。虽然可以通过切换class来实现样式变更，但本文聚焦于使用原生JS直接获取DOM元素的CSS样式值，明确区分“获取”与“设置”的操作差异。

需要明确的是，“获取最终应用的CSS属性对象”意味着即使元素未定义任何自定义样式，该方法也会返回浏览器默认应用的样式值。

ele.style局限性

1、ele.style 在DOM基础学习中，常通过ele.style属性获取元素样式值。然而，该方式有时返回空值，原因在于ele.style仅能读取元素标签内联style属性中的样式，无法获取定义在<style>标签或外部<link>引入的CSS文件中的样式。

示例如下：

var test = document.getElementById("test");
// 获取节点的color属性
test.style.color;

getComputedStyle()标准用法

2、getComputedStyle() getComputedStyle函数用于获取元素当前所有最终应用的CSS属性值。

语法结构如下：

window.getComputedStyle("元素", "伪类");

该方法接收两个参数：目标元素及伪元素字符串（如“:before”）。若无需伪元素信息，第二参数可设为null。也可通过document.defaultView.getComputedStyle("元素", "伪类")调用。

示例如下：

var test = document.getElementById("test"),
demo = window.getComputedStyle(test, null);
// 获取节点的color属性
demo.color

注意：Firefox和Safari会将颜色值转换为rgb格式。若test节点无自定义样式，可通过style.length查看浏览器默认样式的数量。IE6-8不支持此方法，需采用下文所述方案。

IE特有的currentStyle属性

3、ele.currentStyle currentStyle是IE浏览器的特有属性，语法与ele.style相似。区别在于element.currentStyle返回元素当前应用的最终CSS属性值（涵盖外链CSS文件、页面内嵌<style>等）。

语法结构：

var style = dom.currentStyle;

示例如下：

var test = document.getElementById("test"),
demo = test.currentStyle;
// 获取节点的color属性
demo.color;

注意：对于border等综合属性，IE返回undefined，其他浏览器返回值情况不一，但borderLeftWidth等具体属性通常能正常返回。

getPropertyValue与getAttribute差异

4、getPropertyValue() getPropertyValue用于获取CSS样式的直接属性名称。

语法结构如下：

window.getComputedStyle(element, null).getPropertyValue(属性)

示例如下：

var test = document.getElementById('test');
window.getComputedStyle(test, null).getPropertyValue("background-color");

注意：属性名不支持驼峰格式，IE6-8不支持此方法，需采用下文方案。

5、getAttribute getAttribute与getPropertyValue类似，主要差异在于属性名支持驼峰格式。

示例如下：

var test = document.getElementById('test');
window.getComputedStyle(test, null).getPropertyValue("backgroundColor");

注意：该方法仅支持IE6-8。

跨浏览器兼容方案

小结： jQuery的CSS()方法底层即应用了getComputedStyle及getPropertyValue。使用原生JS开发时，可参考上述方法获取元素样式值。

以下提供一个兼容IE、Firefox、Chrome等浏览器的获取元素样式函数，可直接应用于项目：

function getStyle(ele) {
var style = null;
     
if(window.getComputedStyle) {
style = window.getComputedStyle(ele, null);
}else{
style = ele.currentStyle;
     }
     
return style;
 }