jQuery 動態CSS 樣式項目設定

jQuery/jQuery Mobile 技術文件 》

jQuery 針對CSS樣式的套用,亦提供了 css() 方法以支援程式碼的動態控制,透過此方法的調用,可以更進一步控制單一樣式的設定,語法如下:

$(d).css(name, value) ; 

第一個參數為所要設定的樣式名稱,第二個參數 value 則是樣式值,例如:

$(d).css('width', '180px') ; 

這一行程式碼會將 d 元素的寬度設定為 180px 。考慮以下的配置:

<div id="area" style=""></div> 

接下來的程式碼會將其背景顏色改成 black。

$('#area').css('background', 'black');

如果有一組以上的樣式需要設定,可以透過以下的語法格式進行設定:

$(d).css({
name1: value1,
name2: value2,
namen: valuen});

以下是一組實際的設定範例:

$(d).css({
width: '180px',
height: '60px',
background: 'black',
margin: '6px' });

這一段程式碼設定了四組不同的樣式,寫法類似標準的CSS樣式設定,只是以逗號(,)分隔樣式項目。

jQuery/jQuery Mobile 技術文件 》


沒有留言: