CSSStyleDeclaration getPropertyValue() 方法

语法

const style = window.getComputedStyle(element);
const value = style.getPropertyValue(propertyName);

• element: 要获取样式属性值的元素
• propertyName: 要获取的样式属性名称

返回值

• 返回指定样式属性的字符串值，如果属性不存在，则返回空字符串。

示例

假设我们有一个 div 元素，样式为：

<div id="myDiv" style="color: red; font-size: 16px;"></div>

我们可以使用 getPropertyValue() 方法来获取该元素的颜色和字体大小属性值：

const element = document.getElementById('myDiv');
const style = window.getComputedStyle(element);

const color = style.getPropertyValue('color');
const fontSize = style.getPropertyValue('font-size');

console.log(color); // 输出：'red'
console.log(fontSize); // 输出：'16px'

注意事项

• getPropertyValue() 方法只能获取元素的计算样式值，而不能获取内联样式或外部样式表中的样式值。
• 属性名需要使用驼峰命名法，如 font-size 需要写成 fontSize。

通过使用 getPropertyValue() 方法，我们可以轻松地获取元素的样式属性值，方便我们在前端开发中进行样式操作和判断。