原文:javascript中常用坐标属性offset、scroll、client

今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解。

1、在文档(document)对象里面用

scrollWidth/Height:获取对象的滚动宽度(滚动条可以滚动的宽度,相当于整个页面的总宽度的样子--网页正文全宽)

scrollLeft/Top:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(页面利用滚动条滚动到右边时,隐藏在滚动条左边的页面宽度---页面被卷去左边)

 
2、在节点对象里面用:
 
offsetLeft/Top:获取对象相对于版面(css里面没有进行定位,则offsetParent取值为根元素进行计算)或由 offsetParent 属性指定的父坐标的计算左侧位置(当有css定位时,当前对象相对与offsetParent元素的距离)
 
offsetWidth/Height (width+padding+border)
获取当前对象的宽度。
style.width也是当前对象的宽度(width+padding+border)。
区别:1)style.width返回值除了数字外还带有单位px;
           2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值;
           3)如果没有给 HTML 元素指定过 width样式,则 style.width 返回的是空字符串;
 
offsetLeft :
当前对象到其上级层左边的距离。
不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。
style.left当前对象到其上级层左边的距离。
区别:1)style.left返回值除了数字外还带有单位px;
           2)如对象到其上级层左边的距离设定值为百分比,style.left返回此百分比,而offsetLeft则返回到其上级层左边的距离的值;
           3)如果没有给 HTML 元素指定过 left样式,则 style.left返回的是空字符串;
注意:如果上级层为body,由于IE、FF对padding、margin的解释不一样所以要明确规定处理不是下列的区别就不成立了。
IE   1)如果Div的上级层是body,而div与body之间有个div,如body->div->divo;divo的offsetTop=div的padding+margin+boder;
       2)如果Div的上级层是body,如body>divo;divo的offsetTop=div的padding+margin+boder;
             这divo的offsetTop=divo的margin >body.padding则为divo的margin,否则为body.padding谁大是谁?
FF  上述两种情况:offsetTop=margin+padding ;
(IE与FF中的body默认padding为10)在IE6.0 FF3.6.13
 
clientWidth/Height: 
获取对象可见内容的宽度,不包括滚动条,不包括边框;
 
clientLeft/Top:
 获取对象的border宽度
 
 
3、事件里面用的

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

     event.offsetX 相对容器的水平坐标
     event.offsetY 相对容器的垂直坐标
 
4、屏幕的:
     window.screenTop 网页正文部分上
     window.screenLfet 网页正文部分左
 
     window.screen.height  屏幕分辨律的高
     window.screen.left  屏幕分辨律的宽
 
     window.screen.availHeight  屏幕可用工作区的高度
     window.screen.availWidth  屏幕可用工作区的宽度
 
     document.documentElement.scrollTop 垂直方向滚动的值
 
 
网页可见区域宽: document.body.clientWidth;

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

网页可见区域宽: document.body.offsetWidth   (包括边线的宽);

网页可见区域高: document.body.offsetHeight  (包括边线的宽);

网页正文全文宽: document.body.scrollWidth;

网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;

网页被卷去的左: document.body.scrollLeft;

网页正文部分上: window.screenTop;

网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;

屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度: window.screen.availHeight;

屏幕可用工作区宽度:window.screen.availWidth;
 

javascript中常用坐标属性offset、scroll、client的更多相关文章

  1. JavaScript 特效之四大家族(offset/scroll/client/event)

      三大系列:offset.scroll.client 事件对象:event(事件被触动时,鼠标和键盘的状态)(通过属性控制)   三大系列都是以DOM元素节点的属性形式存在的. 类比访问关系,也是以 ...

  2. JavaScript 中常用的 正则表达式

    这编文章我来整理了一些在 javascript 中常用的正则式希望能给大家带来一些开发的灵感 //校验是否全由数字组成 function isDigit(s) { var patrn=/^[0-9]{ ...

  3. JavaScript中对象的属性

    在JavaScript中,属性决定了一个对象的状态,本文详细的研究了它们是如何工作的. 属性类型 JavaScript中有三种不同类型的属性:命名数据属性(named data properties) ...

  4. Javascript中常用事件集合和事件使用方法

    Javascript中常用事件集合和事件使用方法 一.事件绑定 格式: 事件源 . on事件类型=事件处理函数 事件绑定三要素 1.事件源:和谁绑定 2.事件类型:什么事件 3.事件处理函数:触发了要 ...

  5. 借助JavaScript中的Dom属性改变Html中Table边框的颜色

    借助JavaScript中的Dom属性改变Html中Table边框的颜色 -------------------- <html> <head> <title>我是页 ...

  6. javascript 中 arguments.callee属性

    javascript 中 arguments.callee属性 可以在函数内部,指向的是这个函数(或者叫做“类”)本身. 相当于PHP 中的 self 关键字. The arguments.calle ...

  7. 请写出JavaScript中常用的三种事件。

    请写出JavaScript中常用的三种事件. 解答: onclick,onblur,onChange

  8. JavaScript 中的延迟加载属性模式

    传统上,开发人员在 JavaScript 类中为实例中可能需要的任何数据创建属性.对于在构造函数中随时可用的小块数据来说,这不是问题.但是,如果在实例中可用之前需要计算某些数据,您可能不想预先支付该费 ...

  9. JavaScript中常用语句

    1.document.write( " "); 输出语句 2.JS中的行注释为:// 块注释:/**/ 3.传统的HTML文档顺序是:document- >html- > ...

随机推荐

  1. Gradle cookbook(转)

    build.gradle apply plugin:"java" [compileJava,compileTestJava,javadoc]*.options*.encoding ...

  2. ZOJ 3826 Hierarchical Notation 模拟

    模拟: 语法的分析 hash一切Key建设规划,对于记录在几个地点的每个节点原始的字符串开始输出. . .. 对每一个询问沿图走就能够了. .. . Hierarchical Notation Tim ...

  3. UVa10000_Longest Paths(最短路SPFA)

    解题报告 求最长路. 用SPFA求最长路,初始化图为零,dis数组也为零 #include <iostream> #include <cstdio> #include < ...

  4. POJ3061 Subsequence(二进制前缀和法律+仿真足)

    二分法+前缀和法律 满足子序列长度的条件(0,n)之间,sum[x+i]-sum[i]从i元素开始序列长度x和.前缀和可在O(n)的时间内统计 sum[i]的值.再用二分找出满足条件的最小的子序列长度 ...

  5. (初稿)SQL Server 复制(Replication)系列(2)——事务复制搭建

    原文:(初稿)SQL Server 复制(Replication)系列(2)--事务复制搭建 本文演示如何搭建最基本的事务复制. 环境准备: 虚拟机2台: 服务器名分别为RepA和RepB,RepA为 ...

  6. 初探swift语言的学习笔记五(线程)

    作者:fengsh998 原文地址:http://blog.csdn.net/fengsh998/article/details/30354127 转载请注明出处 假设认为文章对你有所帮助,请通过留言 ...

  7. Android组件系列----ContentProvider内容提供商【5】

    2.执行query()方法,查询全部记录(眼下一共两条记录).后台输出效果例如以下: 经測试,其它方法也都是能够运行的. 事实证明,新建的另外一个project文件ContentResolverTes ...

  8. 三思考,实现自己定义404页:Tomcat、SpringMVC精确匹配、重写DispatchServlet

    第1种方式:Tomcat直接处理 web.xml <error-page> <error-code>404</error-code> <location> ...

  9. nsis 固定到任务栏

    nsis 固定到任务栏 win7以上有效 Name "测试" OutFile "test.exe" Section CreateShortCut "$ ...

  10. html不常见问题汇总

    写html已经好长一段时间了,也遇到了不少问题,跟大家分享下 form是不可以嵌套的 说明:如果嵌套会有很多问题 但是可以并列 <html> <head> </head& ...