如何使用JavaScript删除CSS属性？

方法1：使用cssremoveProperty：该CSSStyleDeclaration.removeProperty()方法被用来从一个元件的样式删除一个属性。
通过遍历styleSheets数组并选择cssRule，可以选择元素的样式。然后可以使用要删除的属性指定removeProperty方法。

句法：

element.removeProperty('property')

案例：

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
			.elem {
    
    
				color: green;
				font-size: 3rem;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<div class="elem">Hello World!</div>
		<button onclick="removeProperty()">删除文字修饰属性</button>
		<script>
			function removeProperty() {
    
    
				element = document.styleSheets[0].cssRules[0].style;
				element.removeProperty('text-decoration');
			}
		</script>
	</body>
</html>

效果图：

在这里插入图片描述
方法2：使用setProperty方法：该CSSStyleDeclaration.setProperty()方法可用于设置的样式的所需的属性。选择必须删除其属性的元素，并将此属性应用于其style属性。将此属性设置为initial可将属性重置为其初始值，从而消除该属性的任何影响。

句法：

element.style.setProperty（'color'，'initial'）

案例：

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
			.elem {
    
    
				color: green;
				font-size: 3rem;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<div class="elem">Hello World!</div>
		<button onclick="removeProperty()">删除属性颜色</button>
		<script>
			function removeProperty() {
    
    
				element = document.querySelector('.elem');
				element.style.setProperty('color', 'initial');
			}
		</script>
	</body>
</html>

效果图：
在这里插入图片描述

如何使用JavaScript删除CSS属性？

猜你喜欢