详解Jquery .css()方法

最新推荐文章于 2023-05-23 09:26:22 发布

yy211zhu

最新推荐文章于 2023-05-23 09:26:22 发布

阅读量453

点赞数

分类专栏： Jquery 文章标签： jquery

本文链接：https://blog.csdn.net/yy211zhu/article/details/50790425

版权

Jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

.css（）方法
获取匹配元素集合中的第一个元素的样式属性的值或设置每个匹配元素的一个或多个CSS属性。
语法：
.css(propertyName)
.css(propertyNames,values)
propertyName：css属性名， values：属性值

示例：

<!DOCTYPE html>
<html>
<head>
  <style>
div { width:60px; height:60px; margin:5px; float:left; }
  </style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>

<span id="result">&nbsp;</span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>

<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$("div").click(function () {
  var color = $(this).css("background-color");//获取当前元素background-color属性值
  $("#result").html("That div is <span style='color:" +
                     color + ";'>" + color + "</span>.");//通过html方法显示
});

例2：通过.css()同时获取多个css属性值

<!DOCTYPE html>
<html>
<head>
  <style>
div { height: 50px; margin: 5px; padding: 5px; float: left; }

#box1 { width: 50px; color: yellow; background-color: blue; }
#box2 { width: 80px; color: rgb(255,255,255); background-color: rgb(15,99,30); }
#box3 { width: 40px; color: #fcc; background-color: #123456; }
#box4 { width: 70px; background-color: #f11; }
</style>
  <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>

<p id="result">&nbsp;</p>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<script>
$("div").click(function () {
  var html = ["The clicked div has the following styles:"];

  var styleProps = $(this).css( ["width", "height", "color", "background-color"] );
  $.each( styleProps, function( prop, value ) {
    html.push( prop + ": " + value );
  });/*先用.css()方法获取width,height,color,background-color属性值，然后通过.each函数遍历，其中html.push()方法向html变量中添加属性值

  $( "#result" ).html( html.join( "<br>" ) );/*通过join()方法向html数组中每个元素添加<br>换行标签
});

</script>

</body>
</html>