jQueryのelements_jqueryにスタイルを追加する方法を詳しく解説

この記事の例では、jQuery を使用して要素にスタイルを追加する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

1. スタイルを取得して設定します

$("#tow").attr("class")//获取ID为tow的class属性
$("#two").attr("class","divClass")//设置Id为two的class属性。

2. スタイルを追加します

コードをコピー コードは次のとおりです:

$("#two").addClass("divClass2")/ /はIDです 2つのオブジェクトにスタイル divClass2

を追加します

3. スタイルを削除します

$("#two").removeClass("divClass")//移除 ID为two的对象的class名为divClass的样式。
$(#two).removeClass("divClass divClass2")//移除多个样式。

4. クラス名を切り替えます

コードをコピーします コードは次のとおりです:

$("#two").toggleClass("anotherClass") / / 別のクラス スタイルの切り替えを繰り返します

5. 特定のスタイルが含まれているかどうかを判断します

コードをコピー コードは次のとおりです:

$("#two").hasClass("another")= =$( "#two").is(".another");

6. CSS スタイルでスタイルを取得します

コードをコピー コードは次のとおりです:

$("div").css("color")//色の属性値を設定します。 $(element).css(style)

単一のスタイルを設定します

コードをコピー コードは次のとおりです:

$("div").css("color","re​​d ")

複数のスタイルを設定します

$("div").css({fontSize:"30px",color:"red"})
$("div").css("height","30px")==$("div").height("30px")
$("div").css("width","30px")==$("div").height("30px")

7.offset() メソッド

その機能は、現在のビュー ウィンドウ内の要素の相対オフセットを取得することです。返されるオブジェクトには、top と left という 2 つの属性が含まれます。

注: 表示要素に対してのみ有効です。

var offset=$("div").offset();
var left=offset.left; //获取左偏移
var top=offset.top; //获取右偏移

8.position() メソッド

その機能は、位置スタイル属性が相対または絶対に設定されている最も近い祖父母ノードを基準とした要素の相対オフセットを取得することです。offset() と同様に、返されるオブジェクトには、top と left の 2 つの属性も含まれます。

9.scrollTop()メソッドとscrollLeft()メソッド

$("div").scrollTop(); //获取元素的滚动条距顶端的距离。
$("div").scrollLeft(); //获取元素的滚动条距左侧的距离。

10. jQuery の toggle メソッドと slideToggle メソッドは、要素を表示したり非表示にしたりできます。違いは次のとおりです:

トグル: ダイナミック効果は右から左へです。横方向の動き。
slideToggle: 下から上へのダイナミックな効果。垂直アクション。

たとえば、木が下から上に縮む動的な効果を実現したい場合は、slideToggle を使用するだけです。

$('input').attr("readonly",true)//将input元素设置为readonly
$('input').attr("readonly",false)//去除input元素的readonly属性
$('input').attr("disabled",true)//将input元素设置为disabled
$('input').attr("disabled",false)//去除input元素的disabled属性

この記事が jQuery プログラミングのすべての人に役立つことを願っています。