ホームページ > 記事 > ウェブフロントエンド > JavaScript (コード) を使用して要素の CSS スタイルを変更する 3 つの方法

JavaScript (コード) を使用して要素の CSS スタイルを変更する 3 つの方法

不言オリジナル: 2018-08-21 14:46:5420708ブラウズ

この記事の内容は、JavaScript で要素の CSS スタイルを変更する 3 つの方法 (コード) です。必要な方は参考にしていただければ幸いです。

要素の CSS スタイルを変更するには、通常、タグの style 属性またはヘッダーの style タグで要素を追加、削除、および変更します。

以下は、JS を使用して要素の CSS スタイルを変更するための 3 つのより実用的な方法です。

最初のメソッド: 対応するタグに対応する JavaScript オブジェクト .style を取得し、値を割り当てます

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.square{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<p class=""></p>
		<script>
			//第一种:获取相应标签对应的 javascript对象. style
			(function(){
				var p= document. getElementsByTagName("p")[0];
				p.style.backgroundColor=red;
				p style. width= "300px";
				p style. height="300px";
			})();
		</script>
	</body>
</html>

2 つ目のメソッド: 対応するタグに対応する JavaScript オブジェクトを取得します

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.square{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<p class=""></p>
		<script>
			//第二种:获取相应标签对应的 javascript对象. className
			var p= document. getElementsByTagName("p")[0];
			p.className="square";
		</script>
	</body>
</html>

3 つ目のメソッド: setAttribute(" を通じて)属性名"," 属性値") [広い意味で]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.square{
				width: 300px;
				height: 300px;
				background: red;
			}
		</style>
	</head>
	<body>
		<p class=""></p>
		<script>
			//第三种：通过setAttribute("属性名","属性值")
			var p= document. getElementsByTagName("p")[0];
			p.setAttribute("class","square");
			p.removeAttribute("class");
		</script>
	</body>
</html>

JavaScript (コード) を使用して要素の CSS スタイルを変更する 3 つの方法

関連記事