jQuery css()

admin發表於2018-01-24
jQueryCSS

此方法獲取匹配元素集合中的第一個元素的樣式屬性的計算值或設定每個匹配元素的一個或多個CSS屬性。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
.css(propertyName)

引數解析:

propertyName:一個css屬性名字串。

返回值是對應css屬性的值。

jQuery1.0版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
.css(propertyNames)

存放一個或多個CSS屬性陣列。

返回值是一個包含屬性/屬性值對的物件。

jQuery1.9版本新增。

特別說明:不能獲取屬性的簡寫形式值，例如margin、border等複合屬性，只能夠以如下形式獲取:

[JavaScript] 純文字檢視 複製程式碼
$( elem ).css("borderTopWidth")
$( elem ).css("borderBottomWidth")

語法結構三:

[JavaScript] 純文字檢視 複製程式碼
.css(propertyName,value)

引數解析:

（1）.propertyName:要設定屬性值的CSS屬性名。

（2）.value:設定propertyName屬性的值。

jQuery1.0版本新增。

語法結構四:

[JavaScript] 純文字檢視 複製程式碼
.css(propertyName, function(index,value))

引數解析:

（1）.propertyName:要設定屬性值的CSS屬性名。

（2）.function:用來返回設定值的函式。this指向當前元素。index是當前元素在集合中的索引，value是原來的css值。

jQuery1.4版本新增。

語法結構五:

[JavaScript] 純文字檢視 複製程式碼
.css(properties)

引數解析:

properties:一個用來設定的 屬性/屬性值對的物件。

jQuery1.0版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#ant_1{
  color:blue
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    $("#ant_2").text($("#ant_1").css("color"));
  });
});
</script>
</head>
<body>
<div id="ant_1">螞蟻部落一</div>
<div id="ant_2">螞蟻部落二</div>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

獲取id屬性值為"ant_1"元素的字型顏色值。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#ant_1{
  color:blue;
  background-color:#ccc;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    var str = "";
    var styleProps = $("#ant_1").css(["color", "background-color"]);
    $.each(styleProps, function (prop, value) {
      str = str + prop + ":" + value + "<br/>";
    });
    $("#ant_2").html(str);
  });
});
</script>
</head>
<body>
<div id="ant_1">螞蟻部落一</div>
<div id="ant_2">螞蟻部落二</div>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

可以將一個存放屬性名的陣列作為引數，返回值是一個存放屬性/屬性值對的物件。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  color:blue;
  background-color:green;
  width:300px;
  height:300px;
  line-height:300px;
  text-align:center;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    $("div").css("color","red");
  });
});
</script>
</head>
<body>
<div>螞蟻部落</div>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

將div的字型顏色設定為紅色。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#antzone{
  color:blue;
  background-color:green;
  width:300px;
  height:200px;
  text-align:center;
  line-height:200px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    $("#antzone").css("height",function(index,h){
      return parseFloat(h) + 50;
    });
  });
});
</script>
</head>
<body>
<div id="antzone">螞蟻部落</div>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

回撥函式的返回值就是要設定的屬性值。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#antozne{
  color:blue;
  background-color:green;
  width:300px;
  height:300px;
  text-align:center;
  line-height:300px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#bt").click(function () {
    $("#antozne").css({
      color:"red",
      height:"200px",
      width:"200px"
    });
  });
});
</script>
</head>
<body>
<div id="antozne">螞蟻部落</div>
<input type="button" id="bt" value="檢視演示"/>
</body>
</html>

引數是一個存放css屬性/屬性值對的物件。

相關文章