欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery的css()方法用法實例

 更新時間:2014年12月24日 08:55:23   投稿:shichen2014  
這篇文章主要介紹了jQuery的css()方法用法,以實例形式較為詳細的分析了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://www.dbjr.com.cn/" />
<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://www.dbjr.com.cn/" />
<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>仔細查看變化</div>
  <div>仔細查看變化</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è)置字體大小時候不帶單位默認單位是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://www.dbjr.com.cn/" />
<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>仔細查看變化</div>
  <div>仔細查看變化</div>
  <button>點擊查看效果</button>
</body>
</html>

以上代碼中,點擊按鈕可以修改div中的文本顏色和字體大小。

希望本文所述對大家的jQuery程序設(shè)計有所幫助。

相關(guān)文章

  • jQuery代碼實現(xiàn)實時獲取時間

    jQuery代碼實現(xiàn)實時獲取時間

    這篇文章主要介紹了jQuery代碼實現(xiàn)實時獲取時間功能,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友參考下吧
    2017-01-01
  • jquery實現(xiàn)的下拉和收縮效果示例

    jquery實現(xiàn)的下拉和收縮效果示例

    下拉和收縮類似的效果應(yīng)用非常的頻繁,這篇文章主要介紹了jquery實現(xiàn)的下拉和收縮效果,需要的朋友可以參考下
    2014-08-08
  • JavaScript和JQuery實用代碼片段(一)

    JavaScript和JQuery實用代碼片段(一)

    JavaScript和JQuery實用代碼片段,喜歡學(xué)習(xí)jquery的朋友可以參考下。
    2010-04-04
  • 基于jquery的15款幻燈片插件

    基于jquery的15款幻燈片插件

    幻燈片效果通常用于展示相冊圖片或特色推薦內(nèi)容。一個漂亮的幻燈片更能吸引訪客的注意力。本文里面,收集了15款jquery幻燈片插件,讓你的圖片展示更漂亮,讓你的特色內(nèi)容更吸引人。
    2011-04-04
  • jQuery實現(xiàn)tab選項卡效果的方法

    jQuery實現(xiàn)tab選項卡效果的方法

    這篇文章主要介紹了jQuery實現(xiàn)tab選項卡效果的方法,實例分析了jquery實現(xiàn)tab選項卡切換效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07
  • jquery的extend和fn.extend的使用說明

    jquery的extend和fn.extend的使用說明

    jQuery.fn.extend(object); 對jQuery.prototype進得擴展,就是為jQuery類添加“成員函數(shù)”。jQuery類的實例可以使用這個“成員函數(shù)”。
    2011-01-01
  • jquery實現(xiàn)文本框的禁用和啟用

    jquery實現(xiàn)文本框的禁用和啟用

    本文主要介紹了jquery實現(xiàn)文本框的禁用和啟用,代碼清晰,有需要的朋友可以參考下,希望會對大家有所幫助
    2016-12-12
  • jQuery子選擇器與可見性選擇器實例分析

    jQuery子選擇器與可見性選擇器實例分析

    這篇文章主要介紹了jQuery子選擇器與可見性選擇器,結(jié)合實例形式分析了jQuery子選擇器與可見性選擇器的功能、常見用法及相關(guān)操作注意事項,需要的朋友可以參考下
    2019-06-06
  • jQuery AjaxUpload 上傳圖片代碼

    jQuery AjaxUpload 上傳圖片代碼

    這篇文章主要介紹了jQuery AjaxUpload 上傳圖片代碼的相關(guān)資料,需要的朋友可以參考下
    2016-02-02
  • jQuery中l(wèi)ive方法的重復(fù)綁定說明

    jQuery中l(wèi)ive方法的重復(fù)綁定說明

    使用jQuery的live()方法綁定事件,有時會出現(xiàn)重復(fù)綁定的情況,如,當點擊一個按鈕時,此按鈕所綁定的事件會并執(zhí)行n遍
    2011-10-10

最新評論