一、滚动距离、高度 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 #;
height:300px;
width:300px;
padding:50px;
margin:0px;
}
.inner{
height:800px;
width:600px;
border:5px solid #;
}

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);
});
});

4.结果

  结果说明:

    滚动过程中,scrollTop和scrollLeft的值会变化。

    //实际内容占的实际高度

    scrollHeight = 810(inner 的 height+border)+50(outer 的 padding-top)。

    offsetTop和offsetLeft为8px是浏览器的默认像素,此处指outer元素相对window的偏移。

      //实际所占位置大小 包括border 不包括 margin

    offsetHeight outer元素实际占位置的height  outer 的 content+padding+border

    clientTop outer的上边框

    clientLeft outer的左边框

       //实际可见区域

    clientHeight outer的 content height+padding - 滚动条的宽度

    clientWidth outer的 content width+padding - 滚动条的宽度

  

  (本文供学习交流,欢迎大家共同讨论)

scrollTop,scrollHeight,clientTop,clientHeight,offsetTop,offsetHeight实际意义 及 计算方式 附实例说明的更多相关文章

  1. scrollHeight、clientHeight、offsetHeight、scrollTop等的定义以及图解

    开发中经常遇到使用scrollHeight.scrollTop.clientHeight.offsetHeight等的情况,网上有众多关于这些属性的解释,但是并不全面和直观,现在将这些属性结合图例整理 ...

  2. 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究

    我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...

  3. jquery 对象的 height、innerHeight、outerHeight 的区别以及DOM 元素的 clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

    前言:jquery 对象的 height.innerHeight.outerHeight,还有 DOM 元素的 clientHeight.offsetHeight.scrollHeight.offse ...

  4. offsetTop/offsetHeight scrollTop/scrollHeight 的区别

    offsetTop/offsetHeight   scrollTop/scrollHeight  这几个属性困扰了我N久,这次一定要搞定. 假设 obj 为某个 HTML 控件. obj.offset ...

  5. clientTop、offsetTop和scrollTop的区分

    页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offse ...

  6. 各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight

    1..position()和.offset() jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移,返回.position().le ...

  7. 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  8. 详解clientHeight、offsetHeight、scrollHeight

    关于clientHeight.offsetHeight.scrollHeight   window.screen.availWidth 返回当前屏幕宽度(空白空间)  window.screen.av ...

  9. height、clientHeight、offsetHeight、scrollHeight、height()、 innerHeight()、outerHeight()等的区别

    1.height height是css属性,这个属性定义元素内容区的高度,在内容区外面可以增加内边距.边框和外边距. 当  box-sizing: content-box 时,高度应用到元素的内容框. ...

随机推荐

  1. C# 调用win32API 获取进程句柄 有毛用???

    private void button2_Click(object sender, EventArgs e) { Process[] ProceddingCon = Process.GetProces ...

  2. Git学习总结四(删除)

    一般情况下,你通常直接在文件管理器中把没用的文件删了,或者用rm命令删了: $ rm test.txt 这个时候,Git知道你删除了文件,因此,工作区和版本库就不一致了,git status命令会立刻 ...

  3. Java-Class-Miniprogram:com.common.utils.miniprogram.Auth

    ylbtech-Java-Class-miniprogram:com.common.utils.miniprogram.Auth 1.返回顶部 1.1. package com.ylbtech.com ...

  4. webpack核心概念使用的综合小案例

    注: 由于版本更新很快,同样的配置不同版本很可能会出错(这个就很绝望了) 解决思路 看文档 查看源码接口 网上搜索相应错误 环境 webpack4.x + yarn 文件结构 . ├── dist / ...

  5. Linux内核中_IO,_IOR,_IOW,_IOWR宏的用法与解析

    ref from : http://blog.csdn.net/zhuxiaoping54532/article/details/49680537 main 在驱动程序里, ioctl() 函数上传送 ...

  6. webpack-dev-middleware 与 webpack-hot-middlware

    dev-middleware:  live reload的实现: 思考一下我們要如何更新(live reload)呢? 當然是需要取得 webpack 編好的資料啊,於是就需要在從 request 到 ...

  7. BZOJ 1602 牧场行走

    直接写一波Lca就好了 #include<cstdio> #include<cmath> #include<algorithm> using namespace s ...

  8. 【Codeforces 1114D】Flood Fill

    [链接] 我是链接,点我呀:) [题意] 你选择一个point作为start_position 然后每次你可以将包含该start_position的所有联通块变成任意颜色 问你最少要多少次变换才能将所 ...

  9. 【[Offer收割]编程练习赛13 D】骑士游历(矩阵模板,乘法,加法,乘方)

    [题目链接]:http://hihocoder.com/problemset/problem/1504 [题意] [题解] 可以把二维的坐标转成成一维的; 即(x,y)->(x-1)*8+y 然 ...

  10. 清北学堂模拟赛d6t1 角谷猜想

    分析:不用删数字,我们考虑加入数字,维护一个栈,把不是4和7的数加进去,遇到3看栈顶是不是1,是的话弹出来就可以了. #include <bits/stdc++.h> #define N ...