-
宽和高
// 元素.style.width 只能获取行内 // getStyle(元素, 'width') 自己封装的 // 元素.clientWidth // 元素.offsetWidth //可以获取行内和非行内的宽和高 console.log(box.clientWidth); // width + padding console.log(box.offsetWidth); // width + padding + border // 高也一样
可视区宽高
// 可视区的宽高(html) alert(document.documentElement.clientWidth); alert(document.documentElement.clientHeight);
body和html
console.log(document.body); // body标签 console.log(document.documentElement); // html标签
上边框宽和左边框宽
// 元素的上边框宽和左边框宽 console.log(box.clientTop); // 1 console.log(box.clientLeft); // 1
-
元素.offsetLeft 元素.offsetTop
<div id="box1"> <div id="box2"> <div id="box3"></div> </div> </div>
var box3 = document.getElementById('box3'); console.log(box3.offsetLeft, box3.offsetTop); // ---------------------------------- // 封装一个方法,返回任何一个元素到文档的距离 console.log(getPos(box3)); // { left: 108, top: 88 } function getPos(ele) { var l = 0; var t = 0; while (ele) { l += ele.offsetLeft; t += ele.offsetTop; ele = ele.offsetParent; } return { left: l, top: t } }