var a = r.getBoundingClientRect().width;
alert(box.getBoundingClientRect().top); // 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().right); // 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().bottom); // 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().left); // 元素左边距离页面左边的距离
注意:IE、Firefox3+、Opera9.5、Chrome、Safari支持,在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素,我们需要做个兼容。(在移动端一般都是最新浏览器,一般可以放心使用)
document.documentElement.clientTop; // 非IE为0,IE为2
document.documentElement.clientLeft; // 非IE为0,IE为2
functiongGetRect (element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
return{
top : rect.top - top,
bottom : rect.bottom - top,
left : rect.left - left,
right : rect.right - left
}
}
自适应webapp,可以根据需求设置页面最大宽度,可以动态计算元素大小
(function() {
function w() {
var r = document.documentElement;
var a = r.getBoundingClientRect().width;
if (a > 750) {
a = 750;
}
rem = a / 7.5;
r.style.fontSize = rem + "px"
}
var t;
w();
window.addEventListener("resize", function() {
clearTimeout(t);
t = setTimeout(w, 300)
}, false);
})();