大连辰熙大厦做网站,物流网络平台,宝安品牌设计公司,wordpress透明主题下载//获取元素在包含元素框中的大小
//第1个函数为获取元素在包含元素中左内边框的距离
function getELementLeft(element){//获取元素在包含元素左边距离var actualeftelement.offsetLeft;//获取元素的上级包含元素var currentelement.offsetParent;//循环到一直没有包含元素whil…//获取元素在包含元素框中的大小
//第1个函数为获取元素在包含元素中左内边框的距离
function getELementLeft(element){//获取元素在包含元素左边距离var actualeftelement.offsetLeft;//获取元素的上级包含元素var currentelement.offsetParent;//循环到一直没有包含元素while(current !null){actualeftcurrent.offsetLeft;currentcurrent.offsetParent;}return actualeft;}
//第2个函数为获取元素在包含元素中顶部内边框的距离function getElementTop(element){var actuatopelement.offsetTop;var currentelement.offsetParent;while(current !null){actuatop current.offsetTop;currentcurrent.offsetParent;}return actuatop;}//获取元素在浏览器工作区域中的位置相对于浏览器工作区域的左、右、上、下的值
function getBoundingClientRect(element){//获取带有垂直滚动条的页面区包括在上面的隐藏内容的像素数document.body.scrollTop为兼容IEvar scrollTopdocument.documentElement.scrollTop || document.body.scrollTop;//获取带有水平滚动条的页面区包括在左边的隐藏内容的像素数document.body.scrollLeft为兼容IEvar scrollLeftdocument.documentElement.scrollLeft || document.body.scrollLeft;//检查元素的getBoundingClientRect方法这个方法是元素自有的不是我们上面的那个函数名if(element.getBoundingClientRect){//设置arguments.callee的offset属性才设置肯定为NaN,不等于numberif(typeof arguments.callee.offset !number){//创建一个零时的div元素,设置他的left top 为0var tempdocument.createElement(div);temp.style.cssTextposition:absolute;left:0;top:0;;document.body.appendChild(temp);//让offset获取到值如果是IE8浏览器以前的为-2arguments.callee.offset-temp.getBoundingClientRect().top-scrollTop;document.body.removeChild(temp);tempnull;}var rectelement.getBoundingClientRect();//获取offset值var offsetarguments.callee.offset;//返回元素对于浏览器工作区左中上下距离return {left:rect.left offset,right:rect.rightoffset,top:rect.topoffset,bottom:rect.bottomoffset};//如果元素没有element.getBoundingClientRect则以我们上面两个函数来计算带滚动条的工作区坐标位置}else{var actualLeftgetElementLeft(element);var actualTopgetElementTop(element);}return {left:actualLeft-scrollLeft,right:actualLeftelement.offsetWidth - scrollLeft,top:actulTop-scrollTop,bottom:actualTopelement.offsetHeight - scrollTop} }
var divdocument.getElementById(container);
var bddocument.getElementsByClassName(bd)[0];
var sizegetBoundingClientRect(bd);
console.log(size.left);//html代码部分
div idcontainerdiv classbd/div/div//css
style typetext/css#container{width: 800px;height: 500px;border: 1px solid #ccc;margin: 0 atuo;margin-top: 50px;}div#container .bd{width:400px;height: 400px;border: solid 1px blue;position: relative;top: 50px;left:100px;}/style
