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

getComputedStyle和currentStyle是两种获取元素计算样式的方法，它们在处理CSS样式上有一些区别。本文将对它们进行详细介绍，并提供使用方法和案例说明。

一、getComputedStyle方法：

getComputedStyle方法是用于获取计算后的样式，返回一个包含所有计算过的CSS属性和值的对象。它适用于所有浏览器，并且返回的是一个只读对象。

使用方法：

要使用getComputedStyle方法，首先需要获取要计算样式的元素对象。可以使用querySelector、getElementById等方法选取元素。然后，通过调用window.getComputedStyle(element)来获取计算后的样式。

示例代码：

```javascript

// 选取要计算样式的元素

var element = document.querySelector(".box");

// 获取计算后的样式

var computedStyle = window.getComputedStyle(element);

// 输出样式属性

console.log(computedStyle.width);

console.log(computedStyle.height);

```

案例说明：

假设有一个div元素，其类名为"box"，有如下样式：

```css

.box {

width: 200px;

height: 100px;

background-color: red;

}

```

上面的示例代码中，通过querySelector选取了类名为"box"的元素，并使用getComputedStyle方法获取计算后的样式。然后，通过computedStyle.width和computedStyle.height来获取宽度和高度。最后，将宽度和高度输出到控制台。

二、currentStyle方法：

currentStyle方法是针对IE浏览器的特有方法，用于获取当前样式。它返回一个包含当前计算的样式属性和值的对象。

使用方法：

与getComputedStyle方法不同，currentStyle方法是直接应用在元素对象上的。只需通过element.currentStyle来获取当前样式。

示例代码：

```javascript

// 选取要计算样式的元素

var element = document.querySelector(".box");

// 获取当前样式

var currentStyle = element.currentStyle;

// 输出样式属性

console.log(currentStyle.width);

console.log(currentStyle.height);

```

案例说明：

与getComputedStyle方法相同，上面的示例代码中，通过querySelector选取了类名为"box"的元素，并使用currentStyle方法获取当前样式。然后，通过currentStyle.width和currentStyle.height来获取宽度和高度。最后，将宽度和高度输出到控制台。

三、getComputedStyle和currentStyle的区别：

1. 兼容性：getComputedStyle方法适用于所有浏览器，而currentStyle方法是IE浏览器独有的方法。

2. 返回值类型：getComputedStyle方法返回一个只读对象，而currentStyle方法返回一个可读写对象。

3. 获取属性名称：getComputedStyle方法返回计算后的属性名称，而currentStyle返回的是属性的驼峰命名。

4. 获取未设置样式：getComputedStyle方法会返回计算后的样式，即使样式未在CSS文件或style标签中设置，而currentStyle方法会返回默认样式或空字符串。

总结：

getComputedStyle方法适用于所有浏览器，并返回计算后的样式，兼容性较好；而currentStyle方法仅支持IE浏览器，返回的是当前样式，兼容性较差。

以上是对getComputedStyle和currentStyle的详细介绍及使用方法，希望能对你有所帮助。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/