前端学习笔记style，currentStyle，getComputedStyle的用法与区别

前言

在前端开发中，样式的处理是非常重要的一部分。而 style、currentStyle 和 getComputedStyle 是三种常见的处理样式的方式。本篇攻略将详细讲解它们的用法和区别。

style

style 属性用于在 JavaScript 中设置和返回样式。我们可以通过给 HTMLElement 对象的 style 属性赋值来设置样式，也可以通过读取 style 属性来获取元素的内联样式。

例如，设置元素的样式：

<div id="myDiv">Hello World!</div>

var myDiv = document.getElementById("myDiv");
myDiv.style.color = "red";
myDiv.style.backgroundColor = "blue";

也可以读取元素的内联样式：

var color = myDiv.style.color;
var backgroundColor = myDiv.style.backgroundColor;

style 属性只能获取和设置内联样式，不能获取和设置外部样式和计算样式。在内联样式中使用的单位可以是任意有效的 CSS 单位，如 em、px、in 等。

当前样式类别只包括内联样式，不包括外部样式或嵌入式样式。此外，style 属性只能获取和设置字符串类型的样式值，不能获取数值类型的样式值。

currentStyle

currentStyle 属性是 IE 独有的属性，用于获取元素当前计算出的样式值。此属性返回的样式是应用于元素的所有样式的最终计算结果。

例如：

var myDiv = document.getElementById("myDiv");
var backgroundColor = myDiv.currentStyle.backgroundColor;
var color = myDiv.currentStyle.color;

currentStyle 属性仅适用于 IE 浏览器，因此不能在其他浏览器中使用。

getComputedStyle

getComputedStyle 方法是 W3C 标准的一部分，用于获取元素的计算样式，它返回的是一个对象，其中包含了所有计算样式的属性和值。

例如：

var myDiv = document.getElementById("myDiv");
var backgroundColor = window.getComputedStyle(myDiv).backgroundColor;
var color = window.getComputedStyle(myDiv).color;

getComputedStyle 方法在 IE8 及以下版本的 IE 浏览器中不支持，需要使用 IE 独有的 currentStyle 属性。

区别

• style 属性只能获取和设置内联样式，而 currentStyle 和 getComputedStyle 可以获取计算样式；
• currentStyle 属性只适用于 IE 浏览器，而 getComputedStyle 是 W3C 标准的一部分，可以在所有现代浏览器中使用；
• 获取样式属性的值的方式也不同：style 直接获取和设置样式属性的字符串形式的值，而 currentStyle 和 getComputedStyle 都返回计算样式的值。

示例

示例1：获取元素的宽度和高度

<div id="myDiv" style="width: 100px; height: 50px;">Hello World!</div>

var myDiv = document.getElementById("myDiv");

// 获取元素的内联样式
var width1 = myDiv.style.width; // "100px"
var height1 = myDiv.style.height; // "50px"

// 获取元素的当前计算样式（适用于 IE 浏览器）
var width2 = myDiv.currentStyle.width; // "100px"
var height2 = myDiv.currentStyle.height; // "50px"

// 获取元素的计算样式（适用于非 IE 浏览器）
var width3 = window.getComputedStyle(myDiv).width; // "100px"
var height3 = window.getComputedStyle(myDiv).height; // "50px"

示例2：获取元素的字体大小和颜色

<div id="myDiv" style="font-size: 14px; color: red;">Hello World!</div>

var myDiv = document.getElementById("myDiv");

// 获取元素的内联样式
var fontSize1 = myDiv.style.fontSize; // "14px"
var color1 = myDiv.style.color; // "red"

// 获取元素的当前计算样式（适用于 IE 浏览器）
var fontSize2 = myDiv.currentStyle.fontSize; // "14px"
var color2 = myDiv.currentStyle.color; // "#ff0000"

// 获取元素的计算样式（适用于非 IE 浏览器）
var fontSize3 = window.getComputedStyle(myDiv).fontSize; // "14px"
var color3 = window.getComputedStyle(myDiv).color; // "rgb(255, 0, 0)"