scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义及计算方式附实例说明

时间：2017-04-12 19:52:00 阅读：279 评论：0 收藏：0 [点我收藏+]

标签：logs name 时间 window auto pre jquery 学习交流 get

　　一、滚动距离、高度 scrollTop scrollLeft scrollHeight scrollWidth

　　二、相对位置、距离 offsetTop offsetLeft offsetHeight offsetWidth

　　三、可视距离、宽高 clientTop clientLeft clientHeight clientWidth

　　四、坐标

　　 event.clientX event.clientY event.pageX event.pageY

　　event.offsetX event.offsetY event.layerX event.layerY

　　screenLeft screenTop screenX screenY

　　e.pageX e.pageY e.clientX e.clientY

　　e.offsetX e.offsetY

　　五、例子

一.滚动距离、高度

1.对象滚动条上面和左边折卷的距离（即浏览器滚动条滚动后顶部和左部被隐藏的页面内容像素）

javascript

　　　　document.documentElement.scrollTop//firefox

　　　　document.documentElement.scrollLeft//firefox

　　　　document.body.scrollTop//IE

　　　　document.body.scrollLeft//IE

jquery

　　　　$(window).scrollTop()

　　　　$(window).scrollLeft()

2.滚动对象元素的实际内容宽高，不含边框，包括被卷去看不见的部分。

javascript

　　　　document.body.scrollWidth //IE

　　　　document.body.scrollHeight //IE

　　　　document.documentElement.scrollWidth //firefox

　　　　document.documentElement.scrollHeight //firefox

jquery

　　　　无相关写法，但可获取同等高度

二.相对位置、距离

1.元素相对最近有定位属性的父级元素顶端和左边的偏移值如果没有定位属性，默认为window

javascript

　　　　DOM元素对象.offsetTop //IE firefox

　　　　DOM元素对象.offsetLeft //IE firefox

jquery

　　　　jq对象.offset().top;

　　　　jq对象.offset().left;

2.元素本身的高度

javascript

　　　obj.offsetWidth //obj元素的宽度 offsetWidth = width + padding + border

　　　　obj.offsetHeight //obj元素的高度 offsetHeight = width + padding + border

jquery

　　　　$(obj).outerHeight() //参数设为true 包括margin

　　　　$(obj).outerWidth() //参数设为true 包括margin

　　　　补充：$(obj).height() //不包括padding,border,margin

　　　　　　　$(obj).innerHeight() //包括padding,不包括border,margin

三.可视距离、宽高

1.网页工作区域的高度和宽度(可见区域的宽度和高度)

javascript

　　　　document.documentElement.clientHeight; //IE firefox clientHeight = height + padding

　　　　document.documentElement.clientWidth; //IE firefox clientWidth = width + padding

jquery

　　　　$(window).innerHeight();

　　　　$(window).innerWidth();

2.元素周围边框的厚度

　　　　clientLeft //左边框的宽度

　　　　clientTop //右边框的宽度

四.坐标位置

1.相对文档

　　　　IE 　event.clientX event.clientY

　　　　firefix event.pageX event.pageY

2.相对容器

　　　　IE event.offsetX event.offsetY

　　　　firefox event.layerX event.layerY

3.获取浏览器在电脑屏幕中的位置

　　　　x=window.screenLeft || screenX;

　　　　y=window.screenTop || screenY;

4.获取鼠标在浏览器中的位置

　　　　$(obj).mousemove(function(e){
　　　　　　var x=e.pageX; // 这就是鼠标的x坐标 e.clientX也可以
　　　　　　var y=e.pageY; // 这就是鼠标的y坐标

　　　　})
5.获取鼠标在容器中的坐标

　　　　document.getElementById(‘box‘).onclick=function(e){
　　　　　　var x=e.offsetX || layerX; 这就是鼠标的x坐标
　　　　　　var y=e.offsetY || layerY; 这就是鼠标的y坐标

　　　　}

五.例子

1.css

    .outer{
        overflow:auto;
        border:1px solid #333;
        height:300px;
        width:300px;
        padding:50px;
        margin:0px;
    }
    .inner{
        height:800px;
        width:600px;
        border:5px solid #333;
    }

2.dom

<div id="testDiv" class="outer">
      <div class="inner"></div>
</div>
<div id="result" style="top:420px;left:20px;position:fixed;">

3.js

$(function(){
    var element = document.getElementById("testDiv");
    $(element).scroll(function(){
        var str = "<div><span>滚动到最底端时：scrollTop+clientHeight=scrollHeight___</span>scrollTop:"+element.scrollTop
                    +"</div><div><span>滚动到最右端时：scrollLeft+clientWidth=scrollWidth___</span>scrollLeft:"+element.scrollLeft
                    +"</div><div><span>content(内部元素的实际高度)+padding-top___</span>scrollHeight:"+element.scrollHeight
                    +"</div><div><span>content(内部元素的实际宽度)+padding-left___</span>scrollWidth:"+element.scrollWidth
                    +"<br/><br/><div><span>相对最近有定位属性的父级元素 顶端的偏移___</span>offsetTop:"+element.offsetTop
                    +"</div><div><span>相对最近有定位属性的父级元素 左边的偏移___</span>offsetLeft:"+element.offsetLeft
                    +"</div><div><span>border+padding+content___</span>offsetHeight:"+element.offsetHeight
                    +"</div><div><span>border+padding+content___</span>offsetWidth:"+element.offsetWidth
                    +"<br/><br/><div><span>border-top___</span>clientTop:"+element.clientTop
                    +"</div><div><span>border-left___</span>clientLeft:"+element.clientLeft
                    +"</div><div><span>content+padding-滚动条的宽度___</span>clientHeight:"+element.clientHeight
                    +"</div><div><span>content+padding-滚动条的宽度___</span>clientWidth:"+element.clientWidth
                    +"</div>";
        
        $("#result").html(str);
    });
});