仅删除元素的 CSS 样式

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

仅删除元素的 CSS 样式

作者：迹忆客最近更新：2023/04/27 浏览次数：

我们只能删除元素的 CSS 样式。为此，我们有以下三种方法来重置或删除元素的 CSS 样式：

使用 all: revert CSS 规则删除 CSS 样式。
使用 removeProperty() 方法删除 CSS 样式。
使用 all:unset 方法删除 CSS 样式。

使用 all: revert CSS Rule 仅删除元素的 CSS 样式

all: revert CSS 规则用于重置或删除元素的所有 CSS 样式。如果您想要删除第三方样式表应用的所有样式，或者如果您想要将样式重置为其默认值，这可能是合适的。

要使用 all: revert ，请将其添加到您的 CSS 规则集中，如下所示：

all: revert;

就是这样！所有 CSS 样式将从应用此规则的元素中删除。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Reset/Remove CSS Styles for Element</title>
        <style>
            section {
                color: darkgreen;
            }
            p {
                color: red;
            }
            section.with-revert {
                color: revert;
            }
        </style>
    </head>
    <body>
        <section>
            <h3>This will be dark green</h3>
            <p>Text in paragraph will be red.</p>
            This will also be dark green.
        </section>
        <section class="with-revert">
            <h3>This will be black</h3>
            <p>Text in paragraph will be red.</p>
            This will also be black.
        </section>
    </body>
</html>

使用 removeProperty() 方法仅删除元素的 CSS 样式

另一种方法是使用 removeProperty() 方法从元素或组件中删除特定的 CSS 属性。

此方法删除内联样式和样式表应用的样式。要从元素中删除 CSS 属性，您必须使用 CSS 属性名称，而不是 JavaScript。

例如，要删除颜色属性，您可以像这样使用 removeProperty() 方法：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #ex1 {
                color: red;
            }
        </style>
    </head>
    <body>
        <h1>The removeProperty() Method</h1>

        <p>Click the button to remove the color property.</p>

        <button onclick="myFunction()">Try it</button>

        <div id="ex1">Some text.</div>

        <script>
            function myFunction() {
                var declaration = document.styleSheets[0].cssRules[0].style;
                var removedvalue = declaration.removeProperty("color");
                alert(removedvalue);
            }
        </script>
    </body>
</html>

使用 all: unset 方法仅删除元素的 CSS 样式

所有属性是将所有属性重置为其初始值或继承值的简写。在元素上使用时，它将删除应用于该元素的所有 CSS 样式，包括任何内联样式。

但是，它不会删除用于元素子元素的任何 CSS 样式。

<!DOCTYPE html>
<html>
    <head>
        <title>
            How to reset/remove CSS styles for element ?
        </title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

        <style>
            .geeks {
                all: unset;
            }
            div {
                color: Green;
                font-size: 44px;
            }
        </style>
    </head>

    <body>
        <center>
            <div id="myid">
                Reset/Remove CSS
            </div>
            <br />

            <button id="gfg">
                Click me to Unset CSS
            </button>

            <script>
                $("#gfg").click(function () {
                    $("#myid").addClass("geeks");
                });
            </script>
        </center>
    </body>
</html>