CSSStyleDeclaration getPropertyPriority() 方法(1)

📌 相关文章

📜 CSSStyleDeclaration getPropertyPriority() 方法(1)

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

CSSStyleDeclaration.getPropertyPriority() 方法

CSSStyleDeclaration.getPropertyPriority() 方法用于获取给定 CSS 属性的优先级。如果属性没有设置优先级，则返回空字符串。

语法

style.getPropertyPriority(property)

参数

property：必需。要获取优先级的属性的名称。

返回值

如果指定属性的优先级已设置，则返回优先级。否则返回空字符串。

示例

<!DOCTYPE html>
<html>
<head>
	<title>getPropertyPriority() 方法示例</title>
	<style>
		.my-class {
			color: green !important;
			background-color: yellow;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<p id="demo" class="my-class">测试文本</p>

	<script>
		var elem = document.getElementById("demo");
		var styleObj = window.getComputedStyle(elem);
		var priority1 = styleObj.getPropertyPriority("color");
		var priority2 = styleObj.getPropertyPriority("font-size");
		var priority3 = styleObj.getPropertyPriority("background-color");

		console.log("颜色属性的优先级为：" + priority1);
		console.log("字体大小属性的优先级为：" + priority2);
		console.log("背景颜色属性的优先级为：" + priority3);
	</script>
</body>
</html>

此示例中，我们使用了 getPropertyPriority() 方法获取了文本的某些属性（color、font-size 和 background-color）的优先级。由于 .my-class 类设置了 color 属性的优先级为 !important，所以我们可以看到输出值为 "important"。对于 font-size 和 background-color 属性，由于它们的优先级未被设置，因此输出为空字符串。

浏览器支持

getPropertyPriority() 方法在所有主流浏览器中都得到支持。

详细可查看 Can I Use。

总结

CSSStyleDeclaration.getPropertyPriority() 方法可以用于获取给定 CSS 属性的优先级。如果属性没有设置优先级，则返回空字符串。此方法还可用于检查 DOM 元素的优先级，以确定是否需要将新规则的优先级设置为 !important。