SOURCE

<h2><div></div><div></div></h2>
<p>点击上方红块试试</p>
<script>

  $("div").click(function(){
    var hn = Math.round(($(this).width())/10);
    $(this).css({
      width:function(num,val){
        return parseFloat(val)+20
      },
      height:function(num,val){
        return parseFloat(val)+20
      },
      marginTop:function(num,val){
        return parseFloat(val)+hn
      }
    });
   //  //$(this).css("marginLeft","+=20")
    
   //直接在元素里写入html
     $("p").html(
       "width:"+$(this).width()+
       "<br>height:"+$(this).height()+
       "<br>marginTop:"+parseFloat($(this).css("marginTop"))+
       "<br>offsettop:"+$(this).offset().top+
       "<br>positiontop:"+$(this).position().top
     )
    
    // 通过获取样式数组往html写入
    // var phtml = ["元素的样式为："];
    // var divstyle = $(this).css(["width","height","marginTop"]);
    // $.each(divstyle,function(pop,val){
    //   phtml.push(pop+":"+val);
    // });
    // $("p").html(phtml.join("<br>"))
  })

</script>

div{width:50px;height:50px;margin-top:5px;background-color:#f00;}
*{margin:0;padding:0}