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>
