jqueryで要素スタイルを操作する方法は何ですか?-フロントエンドQ&A-php.cn

jqueryで要素スタイルを操作する方法は何ですか?

青灯夜游

リリース： 2022-06-06 14:17:49

オリジナル

4064 人が閲覧しました

スタイルを操作するメソッド: 1. css()、要素のスタイル属性を設定します; 2. height()、要素の高さを設定します; 3. width()、要素の幅を設定します; 4.scrollLeft()、スクロールバーの左側を基準とした要素のオフセットを設定; 5.scrollTop()、スクロールバーの上部を基準とした要素のオフセットを設定; 6.attr()、要素の id、class、style 属性を制御することによってスタイルを操作します; 7. prop()、要素の style およびその他の属性を制御することによってスタイルを操作します。

jqueryで要素スタイルを操作する方法は何ですか?

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

#要素スタイルを直接操作する jquery メソッド

##CSS プロパティ説明css()一致する要素のスタイル属性を設定または返します。 height()一致する要素の高さを設定または返します。 offset()最初に一致した要素のドキュメントに対する相対的な位置を返します。 position()最初に一致した要素の親要素に対する相対的な位置を返します。 scrollLeft()スクロールバーの左側を基準とした一致する要素のオフセットを設定または返します。 scrollTop()スクロールバーの上部を基準とした一致する要素のオフセットを設定または返します。 width()一致する要素の幅を設定または返します。

1. css()

CSS プロパティ値を返す構文:

$(selector).css(name)

ログイン後にコピー

CSS プロパティ値を設定する構文:

$(selector).css(name,value)

ログイン後にコピー

2.height()

高さを返す構文:

$(selector).height()

ログイン後にコピー

高さを設定する構文:

$(selector).height(length)

ログイン後にコピー

3. width()

幅を返す構文:

$(selector).width()

ログイン後にコピー

幅を設定する構文:

$(selector).width(length)

ログイン後にコピー

例: 要素スタイルの操作 -- 要素幅の変更

1. width() メソッドを使用します

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("img").width("200px");
				});
			});
		</script>
	</head>
	<body>

		<img  src="1.jpg"    style="max-width:90%"/ alt="jqueryで要素スタイルを操作する方法は何ですか?" ><br>
		<button>修改元素的宽度</button>
	</body>
</html>

ログイン後にコピー

jqueryで要素スタイルを操作する方法は何ですか?

##2. css() メソッドを使用する

$(document).ready(function() {
	$("button").click(function() {
	 $("img").css("width","250px");
	});
});

ログイン後にコピー

jqueryで要素スタイルを操作する方法は何ですか?

要素スタイルを間接的に操作する jquery メソッド #jquery では、Manipulate 要素のプロパティを渡して、要素のスタイルを間接的に操作できます。

#メソッド説明addClass()指定された要素を要素クラス名が一致しました。 attr()一致する要素の属性と値を設定または返します。 prop()選択した要素の属性/値を設定または返しますremoveAttr()一致するすべての要素から指定された属性を削除します。 removeClass()一致するすべての要素からすべてのクラスまたは指定されたクラスを削除します。 toggleClass()一致した要素にクラスを追加または削除します。例: attr() を使用してスタイルを追加する

attr() メソッドを使用して要素のスタイル属性を設定する場合、以下を追加できます。 CSS スタイルを要素に追加します。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					// $("div").attr({"style":"border: 5px solid paleturquoise;"});
					$("div").attr("style", "border: 5px solid paleturquoise;width: 200px;");
				});
			});
		</script>
	</head>
	<body>

		<div>hello</div>
		<br>
		<button>给div元素添加css样式</button>

	</body>
</html>

ログイン後にコピー

[推奨学習: jqueryで要素スタイルを操作する方法は何ですか? jQuery ビデオチュートリアル