CSS-Stile nur für ein Element entfernen
-
Verwenden Sie die CSS-Regel
all: revert, um CSS-Stile nur für ein Element zu entfernen -
Verwenden Sie die Methode
removeProperty(), um CSS-Stile nur für ein Element zu entfernen -
Verwenden Sie die
all: unset-Methode, um CSS-Stile nur für ein Element zu entfernen - Abschluss
Sie können CSS-Stile nur für ein Element entfernen. Für diese Absicht haben wir die folgenden drei Methoden, um CSS-Stile für ein Element zurückzusetzen oder zu entfernen:
- Entfernen Sie CSS-Stile mit der CSS-Regel
all: revert. - Entfernen Sie CSS-Stile mit der Methode
removeProperty(). - Entfernen Sie CSS-Stile mit der Methode
all:unset.
Verwenden Sie die CSS-Regel all: revert, um CSS-Stile nur für ein Element zu entfernen
Die CSS-Regel all: revert wird verwendet, um alle CSS-Stile für ein Element zurückzusetzen oder zu entfernen. Dies kann geeignet sein, wenn Sie alle Stile entfernen möchten, die von einem Stylesheet eines Drittanbieters angewendet wurden, oder wenn Sie Ihre Stile auf ihre Standardwerte zurücksetzen möchten.
Um all: revert zu verwenden, fügen Sie es wie folgt zu Ihrem CSS-Regelsatz hinzu:
all: revert;
Das ist es! Alle CSS-Stile werden aus den Elementen entfernt, auf die diese Regel angewendet wird.
<!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>
Verwenden Sie die Methode removeProperty(), um CSS-Stile nur für ein Element zu entfernen
Eine andere Möglichkeit besteht darin, die Methode removeProperty() zu verwenden, um eine bestimmte CSS-Eigenschaft aus dem Element oder einer Komponente zu entfernen.
Diese Methode entfernt Inline-Stile und Stile, die mit einem Stylesheet angewendet wurden. Um eine CSS-Eigenschaft von einem Element zu entfernen, müssen Sie den Namen der CSS-Eigenschaft verwenden, nicht JavaScript.
Um beispielsweise die Eigenschaft color zu entfernen, würden Sie die Methode removeProperty() wie folgt verwenden:
<!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>
Verwenden Sie die all: unset-Methode, um CSS-Stile nur für ein Element zu entfernen
Alle Eigenschaften sind eine Abkürzung für das Zurücksetzen aller Eigenschaften auf ihre ursprünglichen oder geerbten Werte. Wenn es für ein Element verwendet wird, entfernt es alle auf dieses Element angewendeten CSS-Stile, einschließlich aller Inline-Stile.
Es werden jedoch keine CSS-Stile entfernt, die für die untergeordneten Elemente des Elements verwendet werden.
<!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>
Abschluss
Es gibt drei Möglichkeiten, CSS-Stile nur für ein Element zurückzusetzen oder zu entfernen.
Der erste Weg verwendet die CSS-Regel all: revert, die alle Stile mit Ausnahme der HTML-Standardwerte entfernt. Die zweite verwendet die removeProperty() und die dritte die all:unset-Methode, die auch CSS-Stile nur für ein Element zurücksetzt oder entfernt.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn