使用JavaScript删除CSS属性

最新推荐文章于 2024-09-14 17:04:32 发布

qq_43067585

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量3.4k

点赞数 4

分类专栏： JavaScript 文章标签： css javascript 前端

原文链接：https://www.html.cn/qa/javascript/10294.html

版权

JavaScript 专栏收录该内容

57 篇文章 3 订阅

订阅专栏

如何使用JavaScript删除CSS属性？下面本篇就来给大家介绍一下使用JavaScript删除CSS属性的方法，希望对大家有所帮助。

方法一：使用removeProperty()方法

removeProperty()方法用于从元素的样式中移除属性。元素的样式是通过styleSheets数组并选择cssRules来选择的，然后使用RemoveProperty方法指定要删除的属性。

语法：

element.removeProperty('property')

示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>如何使用JavaScript删除CSS属性</title>
		<style>
			.elem {
				color: green;
				font-size: 3rem;
				text-decoration: underline;
			}
		</style>
	</head>

	<body>
		<div class="elem">Hello World!</div>
		<p>
			单击下面的按钮删除元素的text-decoration属性--下划线
		</p>
		<button onclick="removeProperty()"> 删除text-decoration属性</button>
		<script>
			function removeProperty() {
				element =
					document.styleSheets[0].cssRules[0].style;
				element.removeProperty('text-decoration');
			}
		</script>
	</body>

</html>

效果图：

方法二：使用setProperty()方法

setProperty()方法可用于设置样式所需的属性。可以选择必须删除属性的元素，使用setProperty()方法设置属性的值为“initial”将重置该属性为其初始值，达到删除该属性的任何效果。

语法

element.style.setProperty('color', 'initial')

例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>如何使用JavaScript删除CSS属性</title>
		<style>
			.elem {
				color: green;
				font-size: 3rem;
				text-decoration: underline;
			}
		</style>
	</head>

	<body>
		<div class="elem">Hello World!</div>
		<p>
			单击下面的按钮删除元素的color属性--文本颜色
		</p>
		<button onclick="removeProperty()"> 删除color属性</button>
		<script>
			function removeProperty() { 
               element = document.querySelector('.elem'); 
               element.style.setProperty('color', 'initial'); 
            } 
		</script>
	</body>

</html>

效果图：