📌  相关文章
📜  CSSStyleDeclaration getPropertyValue() 方法(1)

📅  最后修改于: 2023-12-03 15:14:23.108000             🧑  作者: Mango

CSSStyleDeclaration getPropertyValue() 方法

CSSStyleDeclaration.getPropertyValue() 方法返回一个字符串，表示指定的CSS属性的值。

语法
value = style.getPropertyValue(propName)
参数
  • propName: 一个字符串，表示要从CSS样式中获取的属性的名称。
返回值

一个字符串，表示指定的CSS属性的值。

示例
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style>
		body {
			background-color: #f0f0f0;
			font-size: 20px;
			color: blue;
		}
	</style>
</head>
<body>
	<script>
		let bodyStyle = getComputedStyle(document.body);
		let fontSize = bodyStyle.getPropertyValue('font-size');
		let color = bodyStyle.getPropertyValue('color');
		
        console.log(`字体大小: ${fontSize}`);
        console.log(`字体颜色: ${color}`);
	</script>
</body>
</html>

上面的示例中，我们获取了元素的计算样式（即外部样式表和内嵌样式表计算后的样式），并使用getPropertyValue()方法获取了字体大小和字体颜色。最终控制台输出：

字体大小：20px
字体颜色：rgb(0, 0, 255)
注意事项
  • getPropertyValue()方法仅适用于computed styles（计算样式，即元素最终渲染出来的样式），而不是像素值或百分比值。
  • 如果指定的属性不存在，则该方法返回一个空字符串。