偏移量、客户区大小、视口大小、滚动大小、确定元素大小

1、偏移量 先讲几个偏移量属性: offsetHeight:元素在垂直方向上占用的空间大小;相当于border-top+padding-top+height+padding-bottom+border-bottom offsetWidth:元素在水平方向上占有的空间大小;相当于botder-left+padding-left+width+padding-right+border+right offsetLeft:元素的左外边框至包含元素的左内边框之间的像素距离。 offsetTop:元素的上外边框至包含元素的上内边框之间的像素距离。

其中,offsetLeft和offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中。

获取某个元素在页面上的偏移量:

function getElementLeft(element){
    var actualLeft=element.offsetLeft;
    var current=element.offsetParent;
    while(current !== null){
        actualLeft += current.offsetLeft;
        current = current.offsetParent;
    }
    return actualLeft;
}

function getElementTop(element){
    var actualTop=element.offsetTop;
    var current=element.offsetParent;
    while(current !== element.offsetParent){
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}

2、客户区大小 客户区大小指的是元素内容及其内边距所占空间的大小。 两个属性: clientWidth:width+左右内边距 clientHeight:height+上下内边距

alert(someElement.clientWidth);

3、视口大小 ①innerWidth和innerHeight表示视口大小(不包含ie8) IE8及更早版本通过DOM提供了页面可见区域: ② document.documentElement.clientWidth和document.documentElement.clientHeight(标准模式) document.body.clientWidth和document.clientHeight(混杂模式)

取得视口大小的跨浏览器的解决方案:

var pageWidth=window.innerWidth,
    pageHeight=window.innerHeight;
if(typeof pageWidth != "number"){
    if(document.compatMode == "CSS1Compat"){
        pageWidth=document.documentElement.clientWidth;
        pageHeight=document.documentElement.clientHeight;
    }else{
        pageWidth=document.body.clientWidth;
        pageHeight=document.body.clientHeight;
    }
}

4、滚动大小 就是指包含滚动内容的元素大小。像textarea、html这些元素,当内容超过所设置的宽高后,就会出现一个滚动条,滚动大小的计算差不多就是指把元素内容平铺后的大小。 scrollHeight:在没有滚动条的情况下(平铺开),内容的总高度。 scrollWidth:在没有滚动条的情况下(平铺开),内容的总宽度。 (上面两者主要是用于确定内容的实际大小) scrollLeft:被隐藏在内容区域左侧的像素数。 scrollTop:被隐藏在内容区域上方的像素数。 (上面两者既可以确定元素当前滚动的状态,也可以设置元素的滚动位置)

5、确定元素的大小 getBoundingClientRect( )方法,这个方法会返回一个矩形对象,包含4个属性left、top、right和bottom,给出了元素在页面中相对于视口的位置 ①由于ie8及更早版本认为文档的左上角坐标是(2,2),而其他浏览器包括ie9则将(0,0)作为起点坐标,所以用函数使用它自身的属性来确定是否要对坐标进行调整。 ②一般来说,right与left的差值与offsetWidth相等;同理,bottom与top的差值与offsetHeight相等。 所以跨浏览器的函数可以写成:

function getBoundingClientRect(element){
    var scrollTop=document.documentElement.scrollTop;
    var scrollLeft=document.documentElement.scrollLeft;

    if(element.getBoundingClientRect){
        if(typeof arguments.callee.offset != "number"){
            var scrollTop=document.documentElement.scrollTop;
            var temp=document.createElement("div");
            temp.style.cssText="position:absolute;left:0;top:0;";
            document.body.appendChild(temp);
            arguments.callee.offset=-temp.getBoundingClientRect().top-scrollTop;
            document.body.removeChild(temp);
            temp=null;
        }

        var rect=element.getBoundingClientRect();
        var offset=arguments.callee.offset;

        return{
            left:rect.left+offset,
            right:rect.right+offset,
            top:rect.top+offset,
            bottom:rect.bottom+offset
        };
    }else{

        var actualLeft=getElementLeft(element);
        var actualTop=getElementTop(element);

        return{
            left:actualLeft-scrollLeft,
            right:actualLeft+element.offsetWidth-scrollLeft,
            top:actualTop-scrollTop,
            bottom:actualTop+element.offsetHeight-scrollTop
        }
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python疯子

UILabel在开发中的常用功能总结

在项目开发中,我们经常会遇到在这样情形: 1、在一个UILabel 使用不同的颜色或不同的字体来体现字符串 在iOS 6 以后我们可以很轻松的实现这一点,官...

1112
来自专栏Alice

上边半透明的效果并且显示的是上一页的内容

项目介绍:首先上边显示的是透明的视图,透明度为0.8 这是一个vc 设置vc的view的背景颜色为clearcolor  上边是一个按钮,设置按钮的透明度为0....

2005
来自专栏Alice

demo1 动态显示view或弹框 动态隐藏view或弹框

有一个弹框,弹框上边有一个关闭按钮,点击按钮,可以关闭弹框。点击弹框的周围区域也可以关闭按钮。 点击上边的隐藏弹框也可以关闭按钮。   在实现功能的基础上,以...

2187
来自专栏一“技”之长

iOS(CGGeometry)几何类方法总结 原

CGPoint CGPointMake(CGFloat x, CGFloat y);

1112
来自专栏谈补锅

记录下UIButton的图文妙用和子控件的优先显示

  UIButton的用处特别多,这里只记录下把按钮应用在图文显示的场景,和需要把图片作为按钮的背景图片显示场景;

893
来自专栏Alice

demo1 动态显示view或弹框 动态隐藏view或弹框

实现界面如上所示: 有一个弹框,弹框上边有一个关闭按钮,点击按钮,可以关闭弹框。点击弹框的周围区域也可以关闭按钮。 点击上边的隐藏弹框也可以关闭按钮。 在实现...

2085
来自专栏前端知识分享

第49天:封装自己的scrollTop

scrollTop和scrollLeft scrollTop 被卷去的头部 当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方的距离 二、页面滚动效果事件 windo...

1341
来自专栏前端说吧

JS-缓冲运动:菜单栏型悬浮框

4665
来自专栏狂码一生

js 获取屏幕各种宽高的方法(浏览器兼容)

屏幕的有效宽高: window.screen.availHeight window.screen.availWidth 网页可见区域宽:document.bod...

51910
来自专栏前端说吧

JS-缓冲运动-对联型悬浮框

3075

扫码关注云+社区

领取腾讯云代金券