企业网站 cms,wordpress破解后台,h5开发网站,好的网站设计培训班前面的话
偏移量(offset dimension)是javascript中的一个重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。当然#xff0c;还有一个偏移参照——定位父级offsetParent。本文将详细介绍该部分内容 offsetParent定位父级
在理解…前面的话
偏移量(offset dimension)是javascript中的一个重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。当然还有一个偏移参照——定位父级offsetParent。本文将详细介绍该部分内容 offsetParent定位父级
在理解偏移大小之前首先要理解offsetParent。人们并没有把offsetParent翻译为偏移父级而是翻译成定位父级很大原因是offsetParent与定位有关
定位父级offsetParent的定义是与当前元素最近的经过定位(position不等于static)的父级元素主要分为下列几种情况
【1】元素自身有fixed定位offsetParent的结果为null 当元素自身有fixed固定定位时我们知道固定定位的元素相对于视口进行定位此时没有定位父级offsetParent的结果为null [注意]firefox浏览器有兼容性问题 div idtest styleposition:fixed/div
script
//firefox并没有考虑固定定位的问题返回body其他浏览器都返回null
console.log(test.offsetParent);
/script 【2】元素自身无fixed定位且父级元素都未经过定位offsetParent的结果为body div idtest/div
script
console.log(test.offsetParent);//body
/script 【3】元素自身无fixed定位且父级元素存在经过定位的元素offsetParent的结果为离自身元素最近的经过定位的父级元素 div iddiv0 styleposition:absolute;div iddiv1 styleposition:absolute;div idtest/div /div
/div
script
console.log(test.offsetParent); //div iddiv1
/script 【4】body元素的parentNode是null console.log(document.body.offsetParent);//null IE7-浏览器Bug 对于定位父级offsetParent来说IE7-浏览器存在以下bug 【bug1】当元素本身经过绝对定位或相对定位且父级元素无经过定位的元素时IE7-浏览器下offsetParent是html div idtest styleposition:absolute;/div
script
//IE7-浏览器返回html其他浏览器返回body
console.log(test.offsetParent);
/script div idtest styleposition:relative;/div
script
//IE7-浏览器返回html其他浏览器返回body
console.log(test.offsetParent);
/script div idtest styleposition:fixed;/div
script
//firefox并没有考虑固定定位的问题返回body其他浏览器都返回null
console.log(test.offsetParent);
/script 【bug2】如果父级元素存在触发haslayout的元素或经过定位的元素且offsetParent的结果为离自身元素最近的经过定位或触发haslayout的父级元素
[注意]关于haslayout的详细信息移步至此 div iddiv0 styledisplay:inline-block;div idtest/div
/div
script
//IE7-浏览器返回div iddiv0其他浏览器返回body
console.log(test.offsetParent);
/script div iddiv0 styleposition:absolute;div iddiv1 styledisplay:inline-block;div idtest/div /div
/div
script
//IE7-浏览器返回div iddiv1其他浏览器返回div iddiv0
console.log(test.offsetParent);
/script div iddiv0 styledisplay:inline-block;div iddiv1 styleposition:absolute;div idtest/div /div
/div
script
//所有浏览器都返回div iddiv1
console.log(test.offsetParent);
/script 偏移量 偏移量共包括offsetHeight、offsetWidth、offsetLeft、offsetTop这四个属性
offsetWidth offsetWidth表示元素在水平方向上占用的空间大小无单位(以像素px计) offsetWidth border-left-width padding-left width padding-right border-right-width; offsetHeight offsetHeight表示元素在垂直方向上占用的空间大小无单位(以像素px计) offsetHeight border-top-width padding-top height padding-bottom border-bottom-width div idtest stylewidth:100px; height:100px; padding:10px; margin:10px; border:1px solid black;/div
script
//122110100101
console.log(test.offsetWidth);
console.log(test.offsetHeight);
/script [注意]如果存在垂直滚动条offsetWidth也包括垂直滚动条的宽度如果存在水平滚动条offsetHeight也包括水平滚动条的高度 div idtest stylewidth:100px; height:100px; padding:10px; margin:10px; border:1px solid black; overflow: scroll;/div
script
//IE8-浏览器将垂直滚动条的宽度计算在width宽度和height高度中width和height的值仍然是100px
//而其他浏览器则把垂直滚动条的宽度从width宽度中移出把水平滚动条的高度从height高度中移出则滚动条宽度为17pxwidth宽度和height高度为剩下的83pxif(window.getComputedStyle){console.log(getComputedStyle(test).width,getComputedStyle(test).height)//83px
}else{console.log(test.currentStyle.width,test.currentStyle.height);//100px
}
//122110100101
console.log(test.offsetWidth,test.offsetHeight);
/script offsetTop offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离
offsetLeft offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离 div idout stylepadding: 5px;position: relative;background-color: pink;margin: 10px;div idtest stylewidth:100px; height:100px; margin:10px;background-color:green;/div
/div
script
//15test.marginTop(10) out.paddingTop(5)
alert(test.offsetTop);alert(test.offsetParent)
//15test.marginLeft(10) out.paddingLeft(5)
alert(test.offsetLeft);
/script IE7-Bug IE7-浏览器在offsetTop属性的处理上存在bug 【1】若父级设置position: relative则IE7-浏览器下无法阻止margin传递现象offsetTop值为offsetParent元素的paddingBottom值 div idout stylepadding: 5px;position: relative;div idtest stylewidth:100px; height:100px; margin:10px;/div
/div
script
//其他浏览器返回15(510)而IE7-浏览器返回5
console.log(test.offsetTop);
/script 【2】若父级设置position: aboslute(或其他触发haslayout的条件)offsetTop值为offsetParent元素的paddingBottom值和当前元素的marginTop值的较大值 div idout stylepadding: 5px;position:absolute;div idtest stylewidth:100px; height:100px; margin:10px;/div
/div
script
//其他浏览器返回15(510)而IE7-浏览器返回10(10和5的较大值)
console.log(test.offsetTop);
/script 页面偏移 要知道某个元素在页面上的偏移量将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加并加上offsetParent的相应方向的边框如此循环直到根元素就可以得到元素到页面的偏移量 [注意]在默认情况下IE8-浏览器下html和body的边框宽度都是medium而其他浏览器是0px html,body{border: 0;}
body{margin:0;} function getCSS(obj,attr){if(window.getComputedStyle){return getComputedStyle(obj)[attr];}return obj.currentStyle[attr];
} function getElementLeft(element){var actualLeft element.offsetLeft;var current element.offsetParent;while(current ! null){actualLeft current.offsetLeft parseFloat(getCSS(current,border-left-width));current current.offsetParent;}return actualLeft px;
}
function getElementTop(element){var actualTop element.offsetTop;var current element.offsetParent;while(current ! null){actualTop current.offsetTop parseFloat(getCSS(current,border-top-width));current current.offsetParent;}return actualTop px;
} div stylepadding: 20px;border:1px solid black;position:absolute;div idtest stylewidth:100px; height:100px; margin:10px;/div
/div
script
//其他浏览器返回31(10201)而IE7-浏览器返回21((20和10的较大值)1)
console.log(getElementTop(test));
//所有浏览器返回31(10201)
console.log(getElementLeft(test));
/script 注意事项 【1】所有偏移量属性都是只读的 div idtest stylewidth:100px; height:100px; margin:10px;/div
script
console.log(test.offsetWidth);//100
//IE8-浏览器会报错其他浏览器则静默失败
test.offsetWidth 10;
console.log(test.offsetWidth);//100
/script 【2】如果给元素设置了display:none则它的偏移量属性都为0 div idtest stylewidth:100px; height:100px; margin:10px;display:none/div
script
console.log(test.offsetWidth);//0
console.log(test.offsetTop);//0
/script 【3】每次访问偏移量属性都需要重新计算 div idtest stylewidth:100px; height:100px; margin:10px;/div
script
console.time(time);
for(var i 0; i 100000; i){var a test.offsetWidth;
}
console.timeEnd(time);//65.129ms
/script div idtest stylewidth:100px; height:100px; margin:10px;/div
script
console.time(time);
var a test.offsetWidth;
for(var i 0; i 100000; i){var b a;
}
console.timeEnd(time);//1.428ms
/script 由上面代码对比可知重复访问偏移量属性需要耗费大量的性能所以要尽量避免重复访问这些属性。如果需要重复访问则把它们的值保存在变量中以提高性能。
强烈推荐好文就要分享。。感谢原作者让我重新认识了一次偏移量谢谢
