jQuery的css()方法用法實例

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

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

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

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

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

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

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

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

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://m.fzitv.net/" />

<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>點擊查看效果</button>

</body>

</html>

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

語法二:

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

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

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

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

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

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

實例代碼:

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://m.fzitv.net/" />

<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>點擊查看效果</button>

</body>

</html>

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

語法三:

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

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

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

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

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

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

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

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="http://m.fzitv.net/" />

<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>點擊查看效果</button>

</body>

</html>