CSS
jQuery - CSS 選擇器方法
jQuery 庫(kù)支持幾乎所有的選擇器，包括層疊樣式表(CSS)。
使用 JQuery 庫(kù)開(kāi)發(fā)人員可以加強(qiáng)他們的網(wǎng)站，只要瀏覽器啟用了 JavaScript，那么就不用擔(dān)心瀏覽器及其版本。
大部分的 JQuery CSS 方法不修改 JQuery 對(duì)象的內(nèi)容，它們用于將 CSS 屬性應(yīng)用到 DOM 元素中。
應(yīng)用 CSS 屬性
使用 jQuery 方法 css( PropertyName, PropertyValue )，那么應(yīng)用任何 CSS 屬性都將會(huì)非常簡(jiǎn)單。
下面是該方法的語(yǔ)法 ——
selector.css( PropertyName, PropertyValue );這里你可以將 PropertyName 作為一個(gè) JavaScript 字符串來(lái)傳遞并且基于它的值，PropertyValue 也會(huì)是一個(gè)字符串或一個(gè)整數(shù)。
示例
下面的例子為第二個(gè)列表項(xiàng)添加字體顏色。
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("li").eq(2).css("color", "red");
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>這將產(chǎn)生如下所示結(jié)果：
應(yīng)用多個(gè) CSS 屬性
你可以使用一個(gè) jQuery 方法 CSS( {key1:val1, key2:val2....) 應(yīng)用多個(gè) CSS 屬性。你可以按你的喜好，在一個(gè)調(diào)用中應(yīng)用許多屬性。
下面是該方法的語(yǔ)法 ——
selector.css( {key1:val1, key2:val2....keyN:valN})這里你可以把 key 作為屬性傳遞，并且把 val 作為值傳遞，如上所示。
示例
下面的例子中為第二個(gè)列表項(xiàng)添加字體顏色及背景顏色。
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("li").eq(2).css({"color":"red", "background-color":"green"});
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>這將產(chǎn)生如下所示結(jié)果：
設(shè)置元素的寬和高
width( val ) 和 height( val ) 方法可以分別用于設(shè)置每個(gè)元素的寬和高。
示例
下面是一個(gè)簡(jiǎn)單的例子，設(shè)置了第一個(gè) division 元素的寬，而其他元素的寬是由樣式表設(shè)置的。
<html>
<head>
<title>The jQuery Example</title>
<script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div:first").width(100);
$("div:first").css("background-color", "blue");
});
</script>
<style>
div{ width:70px; height:50px; float:left; margin:5px; background:red; cursor:pointer; }
</style>
</head>
<body>
<div></div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
</body>
</html>這將產(chǎn)生如下所示結(jié)果：
jQuery CSS 方法
下表列出了所有的方法，你可以使用 CSS 屬性 ——
| 序號(hào) | 方法 & 描述 |
|---|---|
| 1 |
css( name )
返回第一個(gè)匹配元素的樣式屬性。 |
| 2 |
css( name, value )
在所有匹配的元素中，將一個(gè)樣式屬性設(shè)置為一個(gè)值。 |
| 3 |
css( properties )
設(shè)置一個(gè)鍵/值對(duì)象作為所有匹配元素的樣式屬性。 |
| 4 |
height( val )
設(shè)置每個(gè)匹配元素的 CSS 高。 |
| 5 |
height( )
獲取當(dāng)前計(jì)算的第一個(gè)匹配元素的像素，高。 |
| 6 |
innerHeight( )
獲取第一個(gè)匹配元素的內(nèi)部高(不包括邊界，包括填充)。 |
| 7 |
innerWidth( )
獲取第一個(gè)匹配元素的內(nèi)部寬(不包括邊界，包括填充)。 |
| 8 |
offset( )
獲取第一個(gè)匹配元素的相對(duì)于文檔的當(dāng)前偏移量，以像素為單位。 |
| 9 |
offsetParent( )
返回一個(gè) jQuery 集合以及第一個(gè)匹配元素的父元素的定位。 |
| 10 |
outerHeight( [margin] )
獲取第一個(gè)匹配元素的外部高(默認(rèn)包括邊界和填充)。 |
| 11 |
outerWidth( [margin] )
獲取第一個(gè)匹配元素的外部寬(默認(rèn)包括邊界和填充)。 |
| 12 |
position( )
獲取一個(gè)元素相對(duì)于其父元素偏移量的頂端和左端的位置。 |
| 13 |
scrollLeft( val )
當(dāng)傳遞進(jìn)一個(gè)值時(shí)，所有匹配元素的滾動(dòng)左偏移值就會(huì)被設(shè)置為傳遞進(jìn)的那個(gè)值。 |
| 14 |
scrollLeft( )
獲取第一個(gè)匹配元素的滾動(dòng)左偏移值。 |
| 15 |
scrollTop( val )
當(dāng)傳遞進(jìn)一個(gè)值時(shí)，所有匹配元素的滾動(dòng)頂偏移值就會(huì)被設(shè)置為傳遞進(jìn)的那個(gè)值。 |
| 16 |
scrollTop( )
獲取第一個(gè)匹配元素的滾動(dòng)頂偏移值。 |
| 17 |
width( val )
為每個(gè)匹配元素設(shè)置 CSS 寬。 |
| 18 |
width( )
獲取當(dāng)前可計(jì)算的第一個(gè)匹配元素的寬，以像素為單位。 |
更多建議：