如何使用JavaScript删除CSS属性?

如何使用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>

效果图:

1.gif

方法二:使用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>

效果图:

2.gif

以上就是如何使用JavaScript删除CSS属性?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏