方法 1: CSS を使用するremoveProperty
: CSSStyleDeclaration.removeProperty() メソッドは、要素のスタイルからプロパティを削除するために使用されます。要素のスタイルを選択するには、配列
をループして を選択します。その後、削除するプロパティを使用してメソッドを指定できます。styleSheets
cssRule
removeProperty
構文:
element.removeProperty('property')
場合:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.elem {
color: green;
font-size: 3rem;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="elem">Hello World!</div>
<button onclick="removeProperty()">删除文字修饰属性</button>
<script>
function removeProperty() {
element = document.styleSheets[0].cssRules[0].style;
element.removeProperty('text-decoration');
}
</script>
</body>
</html>
レンダリング:
方法 2: 使用setProperty
方法: CSSStyleDeclaration.setProperty() メソッドを使用して、スタイルの必要なプロパティを設定できます。属性を削除する必要がある要素を選択し、この属性をスタイル属性に適用します。このプロパティを に設定するとinitial
、プロパティが初期値にリセットされ、プロパティの影響が排除されます。
構文:
element.style.setProperty('color','initial')
場合:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.elem {
color: green;
font-size: 3rem;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="elem">Hello World!</div>
<button onclick="removeProperty()">删除属性颜色</button>
<script>
function removeProperty() {
element = document.querySelector('.elem');
element.style.setProperty('color', 'initial');
}
</script>
</body>
</html>
レンダリング: