getComputedStyle() 是一个用于获取元素所有计算样式的函数。它的参数是要获取样式信息的元素,返回一个 CSSStyleDeclaration 对象,包含计算出的样式属性的键值对。
JS知识点总结之getComputedStyle的用法
介绍
getComputedStyle() 是一个用于获取元素所有计算样式的函数。它的参数是要获取样式信息的元素,返回一个 CSSStyleDeclaration 对象,包含计算出的样式属性的键值对。
语法
- element:要获取样式属性的元素。
- pseudoElement(可选):伪元素名称。
返回值
CSSStyleDeclaration 对象,包含元素计算出的样式属性。
示例
1. 获取元素颜色属性
上面的代码使用了 getComputedStyle() 函数来获取 p 标签的颜色属性,并将结果存储到 color 变量中。最后将 color 输出到控制台中,可以看到输出结果为 red,即获取到了 p 标签的计算出的颜色属性。
2. 点击按钮获取元素宽度与高度
上面的代码包含一个按钮和一个 div 元素,当点击按钮时会弹出一个提示框,显示 div 元素的宽度和高度信息。使用了 getComputedStyle() 函数获取元素的计算样式,并使用 parseInt() 函数将宽度和高度解析为数字类型。最后将结果显示在提示框中。