编程技术文章分享与教程

网站首页 > 技术文章 正文

「开发小技巧」01-如何使用JavaScript删除CSS属性?

hmc789 2024-11-27 14:45:50 技术文章 2 ℃

方法1：

使用CSS removeProperty：该CSSStyleDeclaration.removeProperty（）方法被用来从一个元件的样式删除一个属性。

通过遍历styleSheets数组并选择cssRule，可以选择元素的样式。然后可以使用要删除的属性指定removeProperty方法。

句法：

element.removeProperty('property')

实例1：

<!DOCTYPE html> <html>   <head>     <title>       How to remove CSS property using JavaScript?   </title>     <style>         .elem {             color: green;             font-size: 3rem;             text-decoration: underline;         } </style> </head>   <body>     <h1 style="color: green">       GeeksForGeeks   </h1>     <b>       How to remove CSS property using JavaScript?   </b>     <div class="elem">Hello World!</div>     <p>       Click on the button below to remove       the text decoration of the element   </p>     <button onclick="removeProperty()">       Remove text-decoration property   </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>       How to remove CSS property using JavaScript?   </title>     <style>         .elem {             color: green;             font-size: 3rem;             text-decoration: underline;         } </style> </head>   <body>     <h1 style="color: green">       GeeksForGeeks   </h1>     <b>       How to remove CSS property using JavaScript?   </b>     <div class="elem">Hello World!</div>     <p>       Click on the button below to remove the text       color of the element   </p>     <button onclick="removeProperty()">       Remove color property   </button>     <script>         function removeProperty() {             element = document.querySelector('.elem');             element.style.setProperty('color', 'initial');         } </script> </body>   </html>

输出：

  • 在单击按钮之前：

单击按钮后：

本文完~

每日更新一个开发小技巧，希望对你有帮助哦，觉得有用的麻烦点点赞支持一下哦，谢谢~~

Tags：

猜你喜欢

标签列表
最新留言