jQuery動態地更改CSS - 簡單！-js教程-PHP中文網

jQuery動態地更改CSS - 簡單！

鑰匙要點

> jQuery提供了一種簡單的方法，可以使用.css（）函數在網站上動態更改CSS樣式，以修改特定屬性，例如顏色，浮點，背景色等等。除了修改現有的CSS樣式外，jQuery還允許通過.removeclass（）方法刪除樣式，並根據其當前值（例如填充或邊距）的現有樣式擴展。

CSS功能演示現在，動態更改您的網站樣式是接管網絡的熱潮！在這個簡短但甜美的帖子中，我將解釋如何使用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樣式的主要方法有兩種主要方法。 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（）function屬性

正如大多數狂熱的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（{
“背景色”：“ yellow”，
“ font-size”：“ 200％”
>}）;
在此示例中，在此示例中，所有段落元素都將其背景顏色變為黃色，並將其font and i jeqle添加到200％

是的，jQuery提供了.addclass（）方法，該方法允許您在所選元素中添加一個或多個類。當您有預定義的CSS課程並且想動態應用它們時，這特別有用。您可以做到這一點：

$（“ p”）。 addClass（“亮點”）;
在此示例中，“亮點”類將添加到所有段落元素中。
>

>如何使用jQuery？

> jQuery從元素中刪除CSS類，提供.removeclass（）方法以從所選元素中刪除一個或多個類。 Here’s an example:

$("p").removeClass("highlight");
In this example, the “highlight” class will be removed from all paragraph elements.

Can I Toggle CSS Classes on Elements Using jQuery?

Yes, jQuery provides the .toggleClass() method which allows you to add a class if it’s not already出現，或刪除它。以下是一個示例：

$（“ p”）。 toggleclass（“亮點”）;
在此示例中，“亮點”類將在所有段落元素上進行切換。

>

>我如何獲得使用jquery的當前屬性值的當前值？您只需要將屬性名稱作為字符串傳遞。以下是一個示例：

var color = $（“ p”）。 css（“ color”）;
在此示例中，第一個段落元素的當前顏色將存儲在“ color”變量中。

>我可以使用jQuery來根據其當前值來更改CSS屬性？每個選定的元素都會調用此函數，其返回值將用作屬性的新值。以下是一個示例：

$（“ p”）。 css（“ font-size”，函數（索引，值）{
>返回parsefloat（value） * 1.2“ px”;
}）;
在此示例中，在此示例中，所有代表元素的大小都會增加j的font in Anim je，可以增加20％。屬性？

是的，jQuery提供了.aimate（）方法，該方法允許您通過隨著時間的推移更改CSS屬性來創建自定義動畫。 Here’s an example:

$("p").animate({
"opacity": 0.5,
"font-size": "200%"
}, 2000);
In this example, the opacity and font size of all paragraph elements will be animated over 2 seconds.

How Can I Use jQuery to Change CSS Properties on Hover？

>您可以將.hover（）方法與.css（）結合使用時，將鼠標指針徘徊在元素上時更改CSS屬性。以下是一個示例：

$（“ p”）。懸停（function（）{
$（this）.css（“ color”，“ color”，“ red”>}，function（）{
$（
$（this）.css（this）.css（cold）當鼠標指針離開時，將其重置為原始顏色。

>我可以使用jQuery在單擊時更改CSS屬性？以下是一個示例：

$（“ p”）。單擊（function（）{

$（this）.css（“ color”，“ color”，“ red”）;

}）;

在此示例中，段落的顏色將更改為段落emploph。

>我如何使用jQuery在滾動上更改CSS屬性？

>您可以將.scroll（）方法與.css（）結合使用時將用戶滾動頁面滾動時更改CSS屬性。這是一個示例：

$（window）.scroll（function（）{ $（“ p”）。css（“ color”，“ color”，“ red”）;
}）;
>在此示例中，所有段落的顏色所有段落的顏色都會更改為所有段落元素，當用戶scrolls scrolls page the page the page。

以上是jQuery動態地更改CSS - 簡單！的詳細內容。更多資訊請關注PHP中文網其他相關文章！