如何使用JavaScript删除CSS属性?

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

image

方法一:使用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属性?

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。