有时，我们需要在执行某些任务后从 HTML 元素中删除 CSS 属性。例如，用户尚未支付您的应用程序的订阅费。因此，您将在标题部分以“红色”显示“到期付款”消息。用户清除付款后，您可以更改标头的内容并删除“color: red”属性以设置初始颜色。
有很多用例需要从 HTML 元素中删除 CSS 属性。在这里，我们将学习删除 CSS 属性的不同方法。
使用removeProperty()方法
第一种方法使用removeProperty() 方法。它用于从 HTML 元素中删除任何 CSS 属性，并将属性名称作为参数。
语法
用户可以按照以下语法使用removeProperty()方法从HTML元素中删除CSS属性。
ele.style.removeProperty("property-name");
在上面的语法中，“ele”是一个 HTML 元素，我们需要从中删除 CSS 属性。
示例
在下面的示例中，我们创建了包含不同 CSS 属性（例如“宽度”、“高度”、“边框”和“背景颜色”）的 div 元素。
每当用户单击按钮时，我们都会执行removeColor()函数。在removeColor()函数中，我们使用类名访问div元素。之后，我们通过传递“background-color”作为参数，使用removeProeprty()方法从div元素中删除背景颜色。
在输出中，用户可以单击按钮并观察背景颜色将被删除。
<html>
<body>
<h3> Using the <i> removeProperty() method </i> to remove the CSS property from HTML element </h3>
<div class = "ele" style = "width: 200px; height: 200px; background-color: red; border: 2px solid black;">
</div> <br>
<button onclick = "removeColor()">
Remove background color </button>
<script>
function removeColor() {
var ele = document.querySelector(".ele");
ele.style.removeProperty("background-color");
}
</script>
</html>
使用 setProperty() 方法
从 HTML 元素中删除 CSS 属性的第二种方法是使用 setProperty() 方法。 setProperty() 方法用于设置 HTML 元素的 CSS 属性，但是当我们为任何 CSS 属性设置空字符串时，我们可以从元素中删除 CSS 属性。
语法
用户可以按照以下语法使用 setProperty() 方法从 HTML 元素中删除 CSS 属性。
ele.style.setProperty(css property, "");
在上面的语法中，我们将属性名称作为第一个参数传递，将空字符串作为第二个参数传递。
示例
在下面的示例中，我们创建了 div 元素，如第一个示例中包含一些 CSS 属性一样。在removeBorder()函数中，我们使用类名和setProperty()方法访问div元素来设置边框的空字符串。
在输出中，我们最初可以观察到绿色边框，当我们单击按钮时，它会删除边框。
<html>
<body>
<h3> Using the <i> setProperty() method </i> to remove the CSS property from HTML element </h3>
<div class = "ele" style = "width: 200px; height: 200px;background-color: blue; border: 10px solid green;">
</div> <br>
<button onclick = "removeBorder()">
Remove border </button>
<script>
function removeBorder() {
var ele = document.querySelector(".ele");
ele.style.setProperty("border", "");
}
</script>
</html>
通过设置“null”值删除 CSS 属性
从 HTML 元素中删除 CSS 属性的另一种方法是为特定 CSS 属性设置 null 值。我们还可以使用 JavaScript 的 setProperty() 方法和 JQuery 的 CSS() 方法为任何特定的 CSS 属性设置 null 值。在这里，我们将直接访问 CSS 属性并为其设置 null 值。
语法
用户可以按照以下语法通过为 CSS 属性设置 null 值来从 HTML 元素中删除 CSS 属性。
element.style.css_property = null;
在上述语法中，用户需要分别将“element”和“css_property”替换为特定的 HTML 元素和 CSS 属性名称。
示例
在下面的示例中，div 元素包含一些文本，我们将字体大小设置为 3rem。在removeSize()函数中，我们访问div元素的“style”对象，并将style对象的“fontSize”属性设置为null。
在输出中，用户可以单击按钮来设置 div 元素文本的初始字体大小。
<html>
<body>
<h3> Setting the <i> null values to CSS proeprties </i> to remove the CSS property from HTML element </h3>
<div style = "font-size: 3rem;">
Hello World! How are you?
</div>
</div> <br>
<button onclick = "removeSize()"> Remove font-size </button>
<script>
function removeSize() {
let div = document.querySelector('div');
div.style.fontSize = null;
}
</script>
</html>
使用removeAttribute()方法
从 HTML 元素中删除 CSS 属性的第四种方法是使用removeAttribute() 方法。 JavaScript 的removeAttribute() 方法用于从JavaScript 中删除特定的HTML 属性。在我们的例子中，我们可以删除“style”属性，这将从 HTML 元素中删除所有样式。
语法
用户可以按照以下语法使用removeAttribute()方法从HTML元素中删除CSS属性。
ele.removeAttribute("style");
在上面的语法中，我们将“style”作为 remvoeAttribute() 方法的参数传递，以删除所有 CSS 属性。
示例
在下面的示例中，我们创建了包含文本和多个 CSS 属性的“
”元素。
removeStyle() 函数使用removeAttribute() 方法从“
”元素中删除“style”属性。
<html>
<body>
<h3> Using the <i> removeAttribute() method </i> to remove the CSS property from HTML element </h3>
<p style = "color: green; font-size: 1.5rem;" class = "para">
Welcome to the tutorials point, <span class = "ele" style = "border: 2px solid red;"> CSS </span> tutorial.
</p> <br>
<button onclick = "removeStyle()"> Remove color </button>
<script>
function removeStyle() {
var ele = document.getElementsByClassName("para")[0];
ele.removeAttribute("style");
}
</script>
</html>
结论
我们学习了四种从 HTML 元素中删除 CSS 属性的不同方法。在第一种方法中，我们使用了removeProperty()方法，这是删除CSS属性的最佳方法之一。第二种和第三种方法几乎相似，都为 CSS 属性设置 null 值，但它不会从 HTML 元素中删除 CSS 属性。
在最后一种方法中，我们使用了removeAttribute()方法来删除“style”属性，但只有当我们需要从HTML元素中删除所有样式时才应该使用它。
以上所有方法仅适用于删除内联 CSS 属性。
以上就是如何使用 JavaScript 删除 CSS 属性？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何使用 JavaScript 删除 CSS 属性？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
