jQuery的css()方法用法實(shí)例

更新時(shí)間：2014年12月24日 08:55:23 投稿：shichen2014

這篇文章主要介紹了jQuery的css()方法用法,以實(shí)例形式較為詳細(xì)的分析了css()方法的幾種常見(jiàn)用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery的css()方法用法。分享給大家供大家參考。具體分析如下：

此方法返回或設(shè)置匹配元素的一個(gè)或多個(gè)樣式屬性。

語(yǔ)法結(jié)構(gòu):

語(yǔ)法一:
取得指定樣式屬性的屬性值。
以樣式屬性名稱作為參數(shù)。例如:

復(fù)制代碼代碼如下:

$("div").css("color")

以上代碼能夠獲取div的字體顏色值。
代碼實(shí)例:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.dhdzp.com/" />

<title>css()函數(shù)-腳本之家</title>

<style type="text/css">

div{

  color:blue;

  background-color:green;

  width:300px;

  height:300px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    alert($("div").css("color"));

  })

})

</script>

</head>

<body>

  <div>腳本之家</div>

  <button>點(diǎn)擊查看效果</button>

</body>

</html>

此處點(diǎn)擊按鈕可以彈出給div設(shè)置的字體顏色值。

語(yǔ)法二:

為所有匹配元素設(shè)置一個(gè)樣式屬性值。例如:

復(fù)制代碼代碼如下:

$("div").css("color","red")

以上代碼可以把所有div的字體顏色設(shè)置為紅色，大家要注意書(shū)寫(xiě)格式，屬性名稱和屬性值要用銀行包裹，中間用逗號(hào)分割。如果屬性值是數(shù)字的話可以去掉引號(hào)，例如:

復(fù)制代碼代碼如下:

$("div").css("font-size",20)

實(shí)例代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.dhdzp.com/" />

<title>css()函數(shù)-腳本之家</title>

<style type="text/css">

div{

  color:blue;

  background-color:green;

  width:100px;

  height:100px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("div").css("color","red");

    $("div").css("font-size",20);

  })

})

</script>

</head>

<body>

  <div>仔細(xì)查看變化</div>

  <div>仔細(xì)查看變化</div>

  <button>點(diǎn)擊查看效果</button>

</body>

</html>

以上代碼中，點(diǎn)擊按鈕可以將div中的文本顏色設(shè)置為紅色。

語(yǔ)法三:

利用“屬性名/值”對(duì)象設(shè)置為所有匹配元素的樣式屬性。例如:

復(fù)制代碼代碼如下:

$("div").css({color:"red"})

以上代碼可以把所有div元素的字體顏色設(shè)置為紅色。使用“屬性名/值”對(duì)象方式也可以一次性為匹配元素設(shè)置多組屬性。例如:

復(fù)制代碼代碼如下:

$("div").css({color:"red",fontSize:20})

以上代碼能夠?qū)iv中的字體顏色和大小分別設(shè)置為紅色和20px，設(shè)置字體大小時(shí)候不帶單位默認(rèn)單位是px。大家要注意格式，這個(gè)時(shí)候?qū)傩悦Q不能用引號(hào)包裹，屬性值需要用引號(hào)包裹，但是如果屬性值是數(shù)字可以省略引號(hào)。特別注意是，font-size和background-color這樣的屬性名稱，中間要去掉中橫杠（-），同時(shí)第二個(gè)單詞首字母要大寫(xiě)，例如font-size要寫(xiě)成fontSize，backgroun-color要寫(xiě)成backgroundColor。

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://www.dhdzp.com/" />

<title>css()函數(shù)-腳本之家</title>

<style type="text/css">

div{

  color:blue;

  background-color:green;

  width:100px;

  height:100px;

  margin-top:5px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("div").css({color:"red",fontSize:20,backgroundColor:"blue"});

  })

});

</script>

</head>

<body>

  <div>仔細(xì)查看變化</div>

  <div>仔細(xì)查看變化</div>

  <button>點(diǎn)擊查看效果</button>

</body>

</html>