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

getComputedStyle和currentStyle都是用来获取元素的计算样式（computed style）的方法，可以获取到元素最终应用到其上的样式。

1. getComputedStyle方法:

getComputedStyle方法用于获取指定元素的计算样式。它接收两个参数，第一个参数是要获取样式的元素，第二个参数是一个伪元素字符串（可选）。

语法：window.getComputedStyle(element, pseudoElement);

其中，element是要获取样式的元素，pseudoElement是一个可选的伪元素字符串，用于获取伪元素的计算样式（如'::before'、'::after'）。

这个方法返回一个对象，包含了指定元素的计算样式。可以通过该对象的各个属性来获取具体的样式值。

示例代码：

```javascript

var element = document.getElementById('myElement');

var style = window.getComputedStyle(element);

console.log(style.width); // 获取元素的宽度

console.log(style.color); // 获取元素的颜色

console.log(style.fontSize); // 获取元素的字体大小

```

2. currentStyle属性：

currentStyle属性是IE浏览器独有的，用于获取元素的计算样式。它是一个只读属性，可以通过element.currentStyle来使用。

示例代码：

```javascript

var element = document.getElementById('myElement');

var style = element.currentStyle;

console.log(style.width); // 获取元素的宽度

console.log(style.color); // 获取元素的颜色

console.log(style.fontSize); // 获取元素的字体大小

```

需要注意的是，currentStyle只能在IE浏览器中使用，其他浏览器不支持。

getComputedStyle与currentStyle的一些特点和区别：

- getComputedStyle方法获取到的是最终计算后的样式，包括外部样式表和内联样式，而currentStyle只获取内联样式。

- getComputedStyle方法返回的是一个只读对象，而currentStyle返回的是一个实时更新的对象，可以通过修改其属性来改变元素样式。

- getComputedStyle方法不在IE6-8中支持，而currentStyle只能在IE浏览器中使用。

下面给出一个案例说明：

HTML代码：

```html

```

JS代码：

```javascript

var element = document.getElementById('myElement');

// 获取元素的宽度

var width = window.getComputedStyle(element).width;

console.log(width); // 输出：200px

// 修改元素的宽度

element.style.width = '300px';

width = window.getComputedStyle(element).width;

console.log(width); // 输出：300px

// 在IE浏览器中使用currentStyle

var currentWidth = element.currentStyle.width;

console.log(currentWidth); // 输出：300px

```

上述例子中，首先使用getComputedStyle方法获取元素的宽度，并输出结果。接着修改元素的宽度，再次获取宽度并输出结果，可以看到宽度已经变为300px。最后，在IE浏览器中使用currentStyle获取宽度，并输出结果，结果与getComputedStyle相同。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/