ホームページ >ウェブフロントエンド >フロントエンドQ&A >jQueryでスタイルを変更する方法

jQueryでスタイルを変更する方法

青灯夜游オリジナル: 2023-01-28 16:19:1410817ブラウズ

jquery のスタイルを変更する方法: 1. css() を使用して、指定した要素に新しいスタイルを設定します。構文 "$(selector).css({"属性名 1":"属性値1" ,"属性名 2":"属性値 2",...})"; 2. attr() を使用して、指定された要素のスタイル属性値を設定します。構文は "$(selector).attr( "style"," 属性名 1: 属性値 1; 属性名 2: 属性値 3;...")"。

jQueryでスタイルを変更する方法

このチュートリアルの動作環境: Windows7 システム、jquery3.6 バージョン、Dell G3 コンピューター。

#jquery のスタイルを変更するには 2 つの方法があります:

css() メソッドを使用して変更します
attr() メソッドで変更する

方法 1: css() メソッドを使用する

css() メソッドでマッチングを設定できます要素 1 つ以上のスタイル属性。

css() メソッドを使用して新しいスタイルを設定するだけです

構文:

$(selector).css({"属性名1":"属性值1","属性名2":"属性值2",...})

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.3.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("div").css({"color":"red","background-color":"papayawhip","font-size":"25px"});
				});
			});
		</script>
		<style>
			.tr1 {
				color: green;
			}
			.tr2 {
				color: red;
				background-color: blanchedalmond;
			}
		</style>
	</head>

	<body class="ancestors">
		<div style="color: yellow;background-color:powderblue;">欢迎来到PHP中文网！</div><br>
		<button>改变div元素的style样式</button>
	</body>

</html>

jQueryでスタイルを変更する方法

##方法 2: attr() メソッドを使用します。

attr() メソッドは、選択した要素の属性値を設定または返します。

attr() メソッドを使用して要素のスタイル属性値を設定するだけです。

文法:

$(selector).attr("style","属性名1:属性值1;属性名2:属性值3;...")

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/jquery-3.6.3.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").on("click", function() {
					$("div").attr("style", "color:pink;background-color:peru;font-size: 18px;");
				});
			});
		</script>
		<style>
			.tr1 {
				color: green;
			}
			.tr2 {
				color: red;
				background-color: blanchedalmond;
			}
		</style>
	</head>

	<body class="ancestors">
		<div style="color: red;background-color:papayawhip;">欢迎来到PHP中文网！</div><br>
		<button>改变div元素的style样式</button>
	</body>

</html>

##[推奨学習: jQueryでスタイルを変更する方法 jQuery ビデオチュートリアル

ウェブフロントエンドビデオ ]

以上がjQueryでスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：ノードにボイスチャットを実装する方法次の記事：ノードにボイスチャットを実装する方法

続きを見る