JavaScript を使用して CSS プロパティを削除するにはどうすればよいですか?

方法 1: CSS を使用するremoveProperty: CSSStyleDeclaration.removeProperty() メソッドは、要素のスタイルからプロパティを削除するために使用されます。要素のスタイルを選択するには、配列
をループして を選択しますその後、削除するプロパティを使用してメソッドを指定できますstyleSheetscssRuleremoveProperty

構文:

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>

レンダリング:
ここに画像の説明を挿入します

おすすめ

転載: blog.csdn.net/weixin_45959525/article/details/119885124