jquery css快捷方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>wrap</title>
 6     <script type="text/javascript" src="../jquery/jquery-1.11.3.min.js"></script>
 7     <style type="text/css">
 8         .lianjie {
 9             display: inline-block;
10             border: 1px solid red
11         }
12 
13         .border {
14             border: 1px solid red
15         }
16 
17         .border1 {
18             outline: 4px dotted green
19         }
20 
21         img {
22             margin: 10px;
23             padding: 10px;
24             border: 1px solid red;
25         }
26     </style>
27 </head>
28 <body>
29 <a href="http://www.baidu.com" class="baidu">百度</a>
30 <a href="http://www.souhu.com" class="souhu">百度</a>
31 <a href="http://www.xinlang.com" class="xinlng">百度</a>sssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
32 <img src="1.jpg" alt="这是张图片"/>
33 
34 <script type="text/javascript">
35     $(document).ready(function () {
36         var imgHeight = $("img").height();//获取一个元素的高度
37         var imgWidth = $("img").width();//获取一个元素的宽度
38         var setHeight = $("img").height("100");//设置元素的高度
39         var setWidth = $("img").width("150");//设置元素的宽度
40         var innerHeight = $("img").innerHeight();//获得一个元素的内部高度，包裹paddding 不包括border margin
41         var innerWidth = $("img").innerWidth();//获得一个元素的内部宽度，包裹paddding 不包括border margin
42         var outerHeight = $("img").outerHeight();//获得一个元素的高度，包括内padding boder margin
43         var outerWidth = $("img").outerWidth();//获得一个元素的宽度，包括内padding boder margin
44         var __offset = $("img").offset();//获得一个元素相对于页面左上角的的坐标
45         var __postion = $("img").position();//获得一个元素相对于父元素的坐标
46         var _scrollLeft = $(window).scrollLeft();//
47         var _scrollTop = $(window).scrollTop();
48         $(window).scroll(function () {
49             console.log($(window).scrollLeft());
50         });
51         console.log(imgHeight);
52         console.log(imgWidth);
53         console.log("内部高度:" + innerHeight);
54         console.log("内部宽度:" + innerWidth);
55         console.log("外部高度：" + outerHeight);
56         console.log("外部宽度：" + outerWidth);
57         console.log("距离页面右上角的距离：" + __offset.left + ":" + __offset.top);
58         console.log("距离父元素左上角的坐标：" + __postion.left + ":" + __postion.top);
59         console.log("横向滚动+" + _scrollLeft);
60         console.log("竖向滚动+" + _scrollTop);
61

    var box = $("div");
    console.log("height:"+box.height() + 'px');//盒子本身的高度
    console.log("innerHeight:"+box.innerHeight() + "px");//盒子本身的高度+内边距的高度
    console.log("outerHeight:"+box.outerHeight() + "px");//盒子本身的高度+内边距的高度+边框的高度
    console.log("outerHeight(true):"+box.outerHeight(true) + "px");//盒子本身的高度+内边距的高度+边框的高度+外边距的高度


    //获取元素相对于父元素的偏移(不包括外边距)
    var positon = box.position();
    console.log("positionLeft:"+positon.left + "px");
    console.log("positionTop:"+positon.top + "px");

    //获取元素相对与视窗的偏移（包括外边距）
    var offset = box.offset();
    console.log("offsetLeft:"+offset.left + "px");
    console.log("offsetTop:"+offset.top + "px");

62 //动态设置元素的高度 63 $("a").css({"display": "inline-block", "border": "1px solid green"}) 64 .height(function (index, elem) {//index是索引 elem是属性值 65 return (index + 1) * 25; 66  }); 67 68  }); 69 70 </script> 71 </body> 72 </html>