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

WBOY
リリース: 2016-05-16 15:22:38
オリジナル
1350 人が閲覧しました

この記事の例では、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 プログラミングのすべての人に役立つことを願っています。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!