jQueryはCSSを動的に変更します - それは簡単です！-jsチュートリアル-php.cn

jQueryはCSSを動的に変更します - それは簡単です！

キーテイクアウト

jQueryは、.css（）関数を使用して、色、フロート、バックグラウンドカラーなどの特定のプロパティを変更するために、Webサイト上のCSSスタイルを動的に変更する簡単な方法を提供します。
jQueryを使用して複数のCSSプロパティを同時に変更できます。また、現在の値、クリック、スクロールなどのユーザーインタラクションに基づいて、要素にCSSクラスを追加、削除、または切り替え、CSSプロパティを変更、または変更することも可能です。

CSS関数デモウェブサイトのスタイルを動的に変更することは、Webを引き継いでいる流行になりました！この短いけど、甘い投稿では、jQueryを使用してシンプルで効果的なCSSトリックを行う方法を説明します。これは、あなたが熱心なjquery開発者全員にとって必須です！

特定のCSS要素を変更します

jQueryでCSSを変更するのは非常に簡単です。これは.css（）関数の形式です。

<span>$('jQuery selector').css({"css property name":"css property value"});</span>

ログイン後にコピー

いくつかの一般的な例があります：

<span>//change paragraph text colour to green 
</span><span>$('p').css({"color":"green"});
</span>
<span>//float all divs with class .left
</span><span>$('div.left').css('float');
</span>
<span>//change all elements with class .bg-red to have a red background
</span><span>$('.bg-red').css({"background-color":"red"});</span>

ログイン後にコピー

jquery cssコマンド

をネストします jQueryが複数ワードのプロパティのCSSとDOMのフォーマットを均等に解釈できることを知っておくと便利です。これはあなたをたくさん節約するだけでなく、きれいに見えます！

newimg<span>.css({'background-image': 'url('+newimgsrc+')'});
</span>newimg<span>.css({'position': 'absolute'});
</span>newimg<span>.css({'height': '70px'});
</span>newimg<span>.css({'width': '200px'});
</span>newimg<span>.css({'top': '68px'});
</span>newimg<span>.css({'right': '2px'});</span>

ログイン後にコピー

まったく同じです：

newimg<span>.css({'background-image': 'url('+newimgsrc+')', 'position': 'absolute', 'height': '70px', 'width': '200px', 'top': '68px', 'right': '2px'});</span>

ログイン後にコピー

cssスタイルを削除

CSSスタイルを削除する2つの主な方法は、それらの間に大きな違いはありません。 1.ページまたは要素に関連付けられているクラスを削除できます

<span>//remove text color from a div
</span><span>$('#mydiv').removeClass('colors');</span>

ログイン後にコピー

2.特定の要素のCSSスタイルを直接削除することもできます

<span>//remove text color from a div
</span><span>$('#mydiv').css('color', '');</span>

ログイン後にコピー

これはまた、同じコールでクラスを削除および追加するための気の利いたjQuery CSSトリックでもあります。

<span>//change text color from red to green (classes specified in stylesheet)
</span><span>$('#div').removeClass('red').addClass('green');</span>

ログイン後にコピー

既存のスタイル値の拡張

現在の値に基づいてスタイルを拡張するだけです。たとえば、要素のパディング左が10pxの場合、次のコードは25pxの合計パディング左になります。

<span>.css( "padding-left", "+=15" )</span>

ログイン後にコピー

jQuery .css（）関数プロパティ

熱心なJQuery開発者のほとんどが知っているように、jQuery 1.4の時点では、.css（）は、プロパティ値として関数を渡すことができます。これは、変化を決定するために現在のCSS値を返すのに便利です。

<span>$('div.example').css('width', function(index) {
</span>  <span>return index * 50;
</span><span>});</span>

ログイン後にコピー

一般的なバックグラウンドCSSの変更

バックグラウンドCSSの変更の例をいくつか紹介します。

<span>$('#myDiv').css('background-image', 'my_image.jpg');
</span><span>// OR
</span><span>$('#myDiv').css('background', 'path/to/image.jpg');
</span><span>// OR
</span><span>$('#myDiv').css("background-image", "url(/myimage.jpg)");  
</span>
<span><br /><br />
</span><span><h2>A Full Code Example - Set Div Background Image</h2>
</span><span>This is a full example of jQuery Code to set a background image into a div dynamically when the page is loaded.
</span>
<span>[code lang="js"]
</span><span><script type='text/javascript'>
</span><span>$(document).ready(function() {
</span>	<span>//preload image (add timestamp to prevent cache)
</span>	<span>var newimgsrc = 'https://www.sitepoint.com/wp-content/uploads/jquery4u/2011/03/jquery-plugins2.jpg?' + (new Date().getTime());
</span>	<span>var newimg = $('#header');
</span>    <span>//replace the image
</span>	<span>$('#header').css("background-image", "url("+newimgsrc+")");
</span>	newimg<span>.css({'background-image': 'url('+newimgsrc+')', 'position': 'absolute', 'height': '70px', 'width': '200px', 'top': '68px', 'right': '2px'});
</span>	newimg<span>.show();
</span><span>});
</span><span></script></span>

ログイン後にコピー

jQuery

でCSSを変更することに関するよくある質問

jQueryを使用して複数のCSSプロパティを一度に変更するにはどうすればよいですか？

jQueryを使用すると、.css（）メソッドを使用して複数のCSSプロパティを同時に変更できます。この方法は、複数のCSSプロパティとその新しい値を定義できるオブジェクトを受け入れます。例は次のとおりです。

$（ "p"）。css（{
"background-color"： "yellow"、
"font-size"： "200％"
}）;
要素？

これは、事前定義されたCSSクラスがあり、動的に適用する場合に特に便利です。これができる方法は次のとおりです。

$（ "p"）。AddClass（ "Highlight"）;
この例では、「ハイライト」クラスがすべての段落要素に追加されます。

jQueryを使用して要素からCSSクラスを削除するにはどうすればよいですか？

jQueryは、選択した要素から1つ以上のクラスを削除するために.RemoveClass（）メソッドを提供します。例は次のとおりです。

$（ "P"）。RemoveClass（ "Highlight"）;
この例では、「ハイライト」クラスはすべての段落要素から削除されます。存在するか、それがある場合はそれを削除します。例は次のとおりです。

$（ "p"）。Gleclass（ "Highlight"）; この例では、「ハイライト」クラスはすべての段落要素で切り替えられます。プロパティ名を文字列として渡すだけです。例は次のとおりです。

var color = $（ "p"）。css（ "color"）;
この例では、最初の段落要素の現在の色は「色」変数に保存されます。方法。この関数は選択された各要素に対して呼び出され、その返品値はプロパティの新しい値として使用されます。例は次のとおりです。

$（ "p"）。CSS（ "font-size"、function（index、value）{return parsefloat（value） * 1.2 "px";