ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryで要素スタイルを操作する方法は何ですか?

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

青灯夜游オリジナル: 2022-05-11 20:17:244070ブラウズ

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

このチュートリアルの動作環境: 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 ビデオチュートリアル

、

Web フロントエンド入門ビデオ ]

以上がjqueryで要素スタイルを操作する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

jquery css class position

声明：

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

前の記事：jqueryで親要素を非表示にする方法次の記事：jqueryで親要素を非表示にする方法

続きを見る