要素のみの CSS スタイルを削除する
-
all: revertCSS ルールを使用して要素のみの CSS スタイルを削除する -
removeProperty()メソッドを使用して要素のみの CSS スタイルを削除する -
all: unsetメソッドを使用して要素のみの CSS スタイルを削除する - まとめ
要素の CSS スタイルのみを削除できます。 この目的のために、要素の CSS スタイルをリセットまたは削除する次の 3つの方法があります。
all: revertCSS ルールを使用して CSS スタイルを削除します。removeProperty()メソッドを使用して CSS スタイルを削除します。all:unsetメソッドを使用して CSS スタイルを削除します。
all: revert CSS ルールを使用して要素のみの 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 スタイルを削除する
もう 1つの方法は、removeProperty() メソッドを使用して、要素またはコンポーネントから特定の CSS プロパティを削除することです。
このメソッドは、インライン スタイルおよびスタイル シートで適用されたスタイルを削除します。 要素から CSS プロパティを削除するには、JavaScript ではなく、CSS プロパティ名を使用する必要があります。
たとえば、color プロパティを削除するには、次のように 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>
まとめ
要素のみの CSS スタイルをリセットまたは削除するには、3つの方法があります。
最初の方法は all: revert CSS ルールを使用し、HTML デフォルト以外のすべてのスタイルを削除します。 2つ目は removeProperty() を使用し、3つ目は要素のみの CSS スタイルをリセットまたは削除する all:unset メソッドを使用します。
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn