ホームページ > 記事 > ウェブフロントエンド > jQueryでスタイルを変更する方法
jQueryでスタイルを変更する方法
- 青灯夜游オリジナル
- 2023-01-28 16:19:1410770ブラウズ
jquery のスタイルを変更する方法: 1. css() を使用して、指定した要素に新しいスタイルを設定します。構文 "$(selector).css({"属性名 1":"属性値1" ,"属性名 2":"属性値 2",...})"; 2. attr() を使用して、指定された要素のスタイル属性値を設定します。構文は "$(selector).attr( "style"," 属性名 1: 属性値 1; 属性名 2: 属性値 3;...")"。
このチュートリアルの動作環境: 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>
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でスタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：ノードにボイスチャットを実装する方法次の記事：ノードにボイスチャットを実装する方法