📌  相关文章
📜  CSSStyleDeclaration parentRule 属性(1)

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

CSSStyleDeclaration parentRule 属性

CSSStyleDeclaration parentRule属性返回元素样式所在的规则的引用。这个属性只有在样式是通过 style 属性设置时才有意义。

语法
var parentRule = window.getComputedStyle(element, pseudoElt).parentRule;

其中，window.getComputedStyle()方法用来获取计算后的样式，element参数指定要获取样式的元素，pseudoElt参数则是一个可选的伪元素。

返回值

parentRule属性会返回一个指向CSSRule对象的引用，该对象表示引用此样式的CSS规则。如果样式不是从CSS规则中应用得到的，parentRule属性返回null。

示例

下面的代码片段演示如何获取元素的样式和其对应的CSS规则：

<!DOCTYPE html>
<html>
<head>
	<style>
		#myDiv {
			font-size: 14px;
			font-family: Arial;
			color: red;
		}
	</style>
</head>
<body>

	<div id="myDiv">Hello world!</div>

	<script>
		var myDiv = document.getElementById("myDiv");
		var computedStyle = window.getComputedStyle(myDiv);
		console.log(computedStyle.fontSize);
		console.log(computedStyle.parentRule.selectorText);
	</script>

</body>
</html>

在上面的示例中，computedStyle对象包含计算后的样式，包括作者样式表和用户样式表。调用computedStyle.parentRule属性将返回一个CSS规则对象。

总结

CSSStyleDeclaration parentRule属性可以让我们了解到元素样式所在的CSS规则，但只有在样式是通过 style 属性设置时才有效。