黑马程序员技术交流社区

标题: 值得琢磨的demo css() [打印本页]

作者: 香菇    时间: 2016-11-20 18:53
标题: 值得琢磨的demo css()
[HTML] 纯文本查看 复制代码
<!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"> </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 );
  });

  $( "#result" ).html( html.join( "<br>" ) );
});

</script>

</body>
</html>


我觉得这段代码的亮点 在这里 :
[HTML] 纯文本查看 复制代码
var styleProps = $(this).css( ["width", "height", "color", "background-color"] );


得到了 .css() 得到了数组与对应的值

作者: 香菇    时间: 2016-11-20 18:54

作者: 香菇    时间: 2016-11-20 18:55

作者: 香菇    时间: 2016-11-20 18:59

作者: 浮世散人    时间: 2016-11-20 22:56
我一点儿都没有看懂,怎么办
作者: 方传奇    时间: 2017-1-3 21:15
好帖,谢谢分享

作者: 浮世散人    时间: 2017-1-5 01:15
很不错的东西,很值得分享




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2