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

一、介绍

在前端开发中，我们常常需要获取元素的样式信息。而获取这些信息的方法主要有两种：getComputedStyle和currentStyle。

getComputedStyle方法是W3C标准，返回的是最终计算的样式，包括块级元素的盒模型，但不包括直接指定在style属性上的样式。

而currentStyle是IE早期版本的私有属性，返回的是最终显示的样式，包括直接指定在style属性上的样式，但不包括盒模型。

二、使用方法

1.getComputedStyle方法：

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

其中，element为待获取样式的DOM元素，pseudoElement为可选参数，表示伪元素的名称（如“::before”、“::after”等），若要获取真正的元素属性，则该参数必须为null。

示例：

```

const element = document.querySelector('.box');

const style = getComputedStyle(element);

console.log(style.width); // "100px"

```

2.currentStyle属性：

语法：element.currentStyle;

其中，element为待获取样式的DOM元素。

示例：

```

const element = document.querySelector('.box');

const style = element.currentStyle;

console.log(style.width); // "100px"

```

三、应用案例

1.元素宽高自适应

假设我们有这样一个场景：需要将一个DOM元素的宽高设置为其父级元素的50%。

首先，我们可以使用getComputedStyle方法获取父级元素的宽高，然后通过计算获取需要设置的值。

示例：

```

const parentElem = document.querySelector('.parent');

const childElem = document.querySelector('.child');

const parentWidth = parseInt(window.getComputedStyle(parentElem).width);

childElem.style.width = parentWidth * 0.5 + 'px';

const parentHeight = parseInt(window.getComputedStyle(parentElem).height);

childElem.style.height = parentHeight * 0.5 + 'px';

```

2.动态获取元素font-size值

在某些场景下，需要获取元素的font-size属性值。这个时候我们可以使用getComputedStyle方法。

示例：

```

const element = document.querySelector('.text');

const fontSize = window.getComputedStyle(element).fontSize;

console.log(fontSize); // "16px"

```

3.动态获取元素颜色值

类似于获取font-size属性值，获取元素的color属性值同样适用getComputedStyle方法。

示例：

```

const element = document.querySelector('.text');

const color = window.getComputedStyle(element).color;

console.log(color); // "rgb(0, 0, 0)"

```

四、总结

getComputedStyle和currentStyle方法都是用于获取DOM元素的样式信息的方法，只不过前者是W3C标准，而后者是IE早期版本的私有属性。

在使用这两种方法时需要注意参数及返回值的差异。如果要兼容不同浏览器，可以使用Modernizr等工具对这两个属性进行检测，然后根据情况进行调用。

壹涵网络我们是一家专注于网站建设、企业营销、网站关键词排名、AI内容生成、新媒体营销和短视频营销等业务的公司。我们拥有一支优秀的团队，专门致力于为客户提供优质的服务。

我们致力于为客户提供一站式的互联网营销服务，帮助客户在激烈的市场竞争中获得更大的优势和发展机会！