免費AI編程助手
CSS
jQuery - CSS 選擇器方法
jQuery 庫支持幾乎所有的選擇器，包括層疊樣式表(CSS)。
使用 JQuery 庫開發(fā)人員可以加強(qiáng)他們的網(wǎng)站，只要瀏覽器啟用了 JavaScript，那么就不用擔(dān)心瀏覽器及其版本。
大部分的 JQuery CSS 方法不修改 JQuery 對象的內(nèi)容，它們用于將 CSS 屬性應(yīng)用到 DOM 元素中。
應(yīng)用 CSS 屬性
使用 jQuery 方法 css( PropertyName, PropertyValue )，那么應(yīng)用任何 CSS 屬性都將會非常簡單。
下面是該方法的語法 ——
selector.css( PropertyName, PropertyValue );這里你可以將 PropertyName 作為一個 JavaScript 字符串來傳遞并且基于它的值，PropertyValue 也會是一個字符串或一個整數(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() {
$("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)用多個 CSS 屬性
你可以使用一個 jQuery 方法 CSS( {key1:val1, key2:val2....) 應(yīng)用多個 CSS 屬性。你可以按你的喜好，在一個調(diào)用中應(yīng)用許多屬性。
下面是該方法的語法 ——
selector.css( {key1:val1, key2:val2....keyN:valN})這里你可以把 key 作為屬性傳遞，并且把 val 作為值傳遞，如上所示。
示例
下面的例子中為第二個列表項添加字體顏色及背景顏色。
<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è)置每個元素的寬和高。
示例
下面是一個簡單的例子，設(shè)置了第一個 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 屬性 ——
| 序號 | 方法 & 描述 |
|---|---|
| 1 |
css( name )
返回第一個匹配元素的樣式屬性。 |
| 2 |
css( name, value )
在所有匹配的元素中，將一個樣式屬性設(shè)置為一個值。 |
| 3 |
css( properties )
設(shè)置一個鍵/值對象作為所有匹配元素的樣式屬性。 |
| 4 |
height( val )
設(shè)置每個匹配元素的 CSS 高。 |
| 5 |
height( )
獲取當(dāng)前計算的第一個匹配元素的像素，高。 |
| 6 |
innerHeight( )
獲取第一個匹配元素的內(nèi)部高(不包括邊界，包括填充)。 |
| 7 |
innerWidth( )
獲取第一個匹配元素的內(nèi)部寬(不包括邊界，包括填充)。 |
| 8 |
offset( )
獲取第一個匹配元素的相對于文檔的當(dāng)前偏移量，以像素為單位。 |
| 9 |
offsetParent( )
返回一個 jQuery 集合以及第一個匹配元素的父元素的定位。 |
| 10 |
outerHeight( [margin] )
獲取第一個匹配元素的外部高(默認(rèn)包括邊界和填充)。 |
| 11 |
outerWidth( [margin] )
獲取第一個匹配元素的外部寬(默認(rèn)包括邊界和填充)。 |
| 12 |
position( )
獲取一個元素相對于其父元素偏移量的頂端和左端的位置。 |
| 13 |
scrollLeft( val )
當(dāng)傳遞進(jìn)一個值時，所有匹配元素的滾動左偏移值就會被設(shè)置為傳遞進(jìn)的那個值。 |
| 14 |
scrollLeft( )
獲取第一個匹配元素的滾動左偏移值。 |
| 15 |
scrollTop( val )
當(dāng)傳遞進(jìn)一個值時，所有匹配元素的滾動頂偏移值就會被設(shè)置為傳遞進(jìn)的那個值。 |
| 16 |
scrollTop( )
獲取第一個匹配元素的滾動頂偏移值。 |
| 17 |
width( val )
為每個匹配元素設(shè)置 CSS 寬。 |
| 18 |
width( )
獲取當(dāng)前可計算的第一個匹配元素的寬，以像素為單位。 |
更多建議：