ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryで要素スタイルを操作する方法は何ですか?
スタイルを操作するメソッド: 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 メソッド
| 説明 | |
|---|---|
| 一致する要素のスタイル属性を設定または返します。 | |
| 一致する要素の高さを設定または返します。 | |
| 最初に一致した要素のドキュメントに対する相対的な位置を返します。 | |
| 最初に一致した要素の親要素に対する相対的な位置を返します。 | |
| スクロール バーの左側を基準とした一致する要素のオフセットを設定または返します。 | |
| スクロール バーの上部を基準とした一致する要素のオフセットを設定または返します。 | |
| 一致する要素の幅を設定または返します。 |
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>
##2. css() メソッドを使用する
$(document).ready(function() {
$("button").click(function() {
$("img").css("width","250px");
});
});
要素スタイルを間接的に操作する jquery メソッド #jquery では、Manipulate 要素のプロパティを渡して、要素のスタイルを間接的に操作できます。
| addClass() | |
|---|---|
| attr() | |
| prop() | |
| removeAttr() | |
| removeClass() | |
| toggleClass() | |
<!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 ビデオ チュートリアル
Web フロントエンド入門ビデオ ]
以上がjqueryで要素スタイルを操作する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。