如何使用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>
效果图：
本文参考地址：https://www.html.cn/qa/javascript/10294.html
