jQuery函數學習之五(css部分)

也就是對dom元素中的樣式進行操作

函數：css(name)
功能：擷取匹配元素指定屬性名稱的值
返回：string
參數：要訪問的樣式屬性名稱
例子：
Retrieves the color style of the first paragraph

jQuery Code
$("p").css("color");
Before
<p style="color:red;">Test Paragraph.</p>
Result:
"red"

Retrieves the font-weight style of the first paragraph.

jQuery Code
$("p").css("font-weight");
Before
<p style="font-weight: bold;">Test Paragraph.</p>
Result:
"bold"

 

 

函數：css(properties)，css(key, value)
功能：設定一組樣式，設定一個樣式
返回：jQuery對象
參數：屬性數組對象，屬性名稱/值
例子：
Sets color and background styles to all p elements.

jQuery Code
$("p").css({ color: "red", background: "blue" });
Before
<p>Test Paragraph.</p>
Result:
<p style="color:red; background:blue;">Test Paragraph.</p>

Changes the color of all paragraphs to red

jQuery Code
$("p").css("color","red");
Before
<p>Test Paragraph.</p>
Result:
<p style="color:red;">Test Paragraph.</p>

Changes the left of all paragraphs to "30px"

jQuery Code
$("p").css("left",30);
Before
<p>Test Paragraph.</p>
Result:
<p style="left:30px;">Test Paragraph.</p>

 

 

函數：height()，height(val)
功能：擷取第一個匹配元素的高度，height(val)設定所有匹配元素的高度
返回：string
例子：
jQuery Code
$("p").height();
Before
<p>This is just a test.</p>
Result:
300

jQuery Code
$("p").height(20);
Before
<p>This is just a test.</p>
Result:
<p style="height:20px;">This is just a test.</p

jQuery Code
$("p").height("20em");
Before
<p>This is just a test.</p>
Result:
<p style="height:20em;">This is just a test.</p>

 

 

函數：width(),width(val)
功能：擷取第一個元素的寬度，width(val)設定所有匹配元素的寬度
例子：和上面差不多，就不列舉了。