요소에 대해서만 CSS 스타일 제거
-
all: revertCSS 규칙을 사용하여 요소에 대해서만 CSS 스타일 제거 -
removeProperty()메서드를 사용하여 요소에 대한 CSS 스타일만 제거 -
all: unset방법을 사용하여 요소에 대한 CSS 스타일만 제거 - 결론
요소에 대해서만 CSS 스타일을 제거할 수 있습니다. 이를 위해 요소의 CSS 스타일을 재설정하거나 제거하는 다음 세 가지 방법이 있습니다.
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 스타일만 제거
또 다른 방법은 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 스타일을 재설정하거나 제거하는 세 가지 방법이 있습니다.
첫 번째 방법은 all: revert CSS 규칙을 사용하여 HTML 기본값을 제외한 모든 스타일을 제거합니다. 두 번째는 removeProperty()를 사용하고 세 번째는 요소에 대해서만 CSS 스타일을 재설정하거나 제거하는 all:unset 메서드를 사용합니다.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn