closest, parents
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul id="one" class="level-1"> <li class="item-i">I</li> <li id="ii" class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li class="item-3">3</li> </ul> </li> <li class="item-c">C</li> </ul> </li> <li class="item-iii">III</li> </ul> <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script> <script> // closest 从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素 console.log($('.item-a').closest('ul').attr('class')) // level-2 console.log($('.item-a').closest('li').attr('class')) // item-a console.log($('.item-a').parents().length) // 5 </script> </body> </html>
offset, offsetParent, position
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{margin:0;padding:0;} div{padding:10px;} #box1,#container1{background:red;} #box2,#container2{background:green;} #box3,#container3{background:gray;} #container2{position:relative;} </style> </head> <body> <div id="box1"> <div id="box2"> <div id="box3">box3</div> </div> </div> <div id="container1"> <div id="container2"> <div id="container3">container3</div> </div> </div> <script src="http://static01.baomihua.com/js/lib/jquery-1.4.4.min.js?t=20120926.js"></script> <script> /** * offset() 在匹配的元素集合中，获取的第一个元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档 * offsetParent() 获取离指定元素最近的含有定位信息的祖先元素 * position() 获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 译者注：offset parent指离该元素最近的而且被定位过的祖先元素 ) */ console.log($('#box3').offset()) console.log($('#box3').offsetParent()) console.log($('#box3').position()) console.log($('#container3').offset()) console.log($('#container3').offsetParent()) console.log($('#container3').position()) </script> </body> </html>
width, innerWidth, outerWidth, height, innerHeight, outerHeight
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #box1{background:gray;padding:10px;margin:10px;border:10px solid red;width:100px;height:100px;} </style> </head> <body> <div id="box1" style="color:red;">box1</div> <script src="http://static01.baomihua.com/js/lib/jquery-1.4.4.min.js?t=20120926.js"></script> <script> /** * .css('height') 和 .height()之间的区别是后者返回一个没有单位的数值 * box-sizing: border-box * width() height() * innerWidth() innerHeight() 包括padding * outerWidth([includeMargin]) outerHeight([includeMargin]) 包括padding, border, [margin] */ console.log($('#box1').css('height'), $('#box1').height()) console.log(document.getElementById('box1').offsetHeight) </script> </body> </html>