仅删除元素的 css 样式-ag捕鱼王app官网

当前位置：ag捕鱼王app官网 > > 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 样式将从应用此规则的元素中删除。

html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>reset/remove css styles for elementtitle>
        <style>
            section {
                color: darkgreen;
            }
            p {
                color: red;
            }
            section.with-revert {
                color: revert;
            }
        style>
    head>
    <body>
        <section>
            <h3>this will be dark greenh3>
            <p>text in paragraph will be red.p>
            this will also be dark green.
        section>
        <section class="with-revert">
            <h3>this will be blackh3>
            <p>text in paragraph will be red.p>
            this will also be black.
        section>
    body>
html>

使用 removeproperty() 方法仅删除元素的 css 样式

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

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

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

html>
<html>
    <head>
        <style>
            #ex1 {
                color: red;
            }
        style>
    head>
    <body>
        <h1>the removeproperty() methodh1>
        <p>click the button to remove the color property.p>
        <button onclick="myfunction()">try itbutton>
        <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 样式。

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>

总结

可以通过三种方式仅为元素重置或删除 css 样式。

第一种方法使用 all: revert css 规则，它将删除除 html 默认值之外的所有样式。第二个使用 removeproperty()，第三个使用 all:unset 方法，该方法也将仅重置或删除元素的 css 样式。

上一篇：使用 css 创建背景图像渐变

下一篇：使用 css 样式化输入和提交按钮

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

发布时间：2023/04/28 浏览次数：133 分类：css

本文介绍的是著名的 css ui 框架 bootstrap。我们将讨论使用自定义样式覆盖 bootstrap css 的过程。

使用 css 制作带圆角的 html 表格

发布时间：2023/04/28 浏览次数：245 分类：css

这个简短的文章是关于在 html 页面上制作圆角表格的 css 样式。使用 css 制作带圆角的 html 表格使图像、表格或 div 段的角变圆的属性是 border-radius。

css 设置轮廓 outline 的半径

发布时间：2023/04/28 浏览次数：140 分类：css

在本文中，用户将学习如何为 outline 属性设置圆角，与 border-radius 属性相同。在这里，我们已经解释了将圆角应用于轮廓属性的不同方法。

发布时间：2023/04/28 浏览次数：265 分类：css

在本文中，用户将学习仅使用 css 将

使用 css 居中内联块

发布时间：2023/04/28 浏览次数：118 分类：css

在本文中，我们将创建多个 html 元素并将其显示设置为 inline-block。之后，我们将学习使用 display: inline-block 将所有元素居中。

使用 css 添加透明边框

发布时间：2023/04/28 浏览次数：525 分类：css

在本文中，我们将讨论在 html 中的图像、按钮或任何其他对象周围创建透明边框。透明边框是图像或对象周围的边框，可改善用户体验。

发布时间：2023/04/28 浏览次数：704 分类：css

有时，在开发网页时，我们将文本放在底部或页脚中，因此我们可能需要在文本下方留一个空格并将文本上移。我们将学习如何使用 css 从网页底部向上移动文本。

发布时间：2023/04/28 浏览次数：233 分类：css

本文提供了使用 css、javascript 和 jquery 使文本闪烁的详细说明。

css 防止文本选择

发布时间：2023/04/28 浏览次数：81 分类：css

在本文中，我们讨论了防止文本选择和使用具有 none 值的 user-select 属性。此外，您还将了解如何为不同的 web 浏览器使用该属性。

仅删除元素的 css 样式-ag捕鱼王app官网