原文: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. 自动同步Android源代码的脚本(repo sync)

    #!/bin/bash echo "================start repo sync====================" repo sync -j5 ]; do ...

  2. SSH2.0编程 ssh协议过程实现(转)

    SSh协议: 全称为Secure Shell,即很安全的shell,主要目的是用来取代传统的telnet和r系列命令(rlogin,rsh,rexec等)远程登录和远程执行命令的工具,实现远程登录和远 ...

  3. ListView装上拉电阻下拉刷新

    主要用到了这个几个文件.MainActivity是界面的Activity,MyAdapter是ListView的自己定义适配,MyListView是自己定义带头部LIistView,假设仅仅须要上拉载 ...

  4. 认识mongoDB数据库

    mongodb中有三元素:数据库,集合,文档,其中“集合”对应关系型数据库中的“表”,“文档”对应“行”. 安装mongoDB: 去官网下载对应系统的mongoDB压缩包,解压后将文件夹重命名为mon ...

  5. 解决mysqldb查询大量数据导致内存使用过高的问题

    1.源码 connection=MySQLdb.connect( host="thehost",user="theuser", passwd="the ...

  6. HDU 1711 Number Sequence(算法验证)

    该怎么做.每一个人的人生都应该自己掌握.你给不了别人一切.你也不懂别人的忧伤. 微笑不代表快乐.哭泣不一定悲伤 不努力怎么让关心你的人幸福.不努力怎么让看不起你的人绝望. 我用生命在奋斗--lx_Zz ...

  7. 调整CentOS的文字登陆界面的分辨率

    通过文字界面登陆到系统,切换到root权限. 用vi打开  /boot/grub/menu.lst 文件  ,因为menu.lst是grub.conf文件的快捷方式,终于打开的还是grub.conf文 ...

  8. 【Java基础】常用基础--从键盘中得到一个字符串

    public static void main(String[] args) { InputStreamReader ipsReader = new InputStreamReader(System. ...

  9. 让你提前知道软件开发(24):C语言和主要特征的历史

    文章1部分 再次了解C语言 C语言的发展历史和主要特点 作为一门众所周知的计算机编程语言,C语言是谁发明的呢?它是怎样演进的?它有何特点?究竟有多少人在使用它? 1. C语言之父 C语言是1972年由 ...

  10. .NET应用架构设计—工作单位模式(摆脱程序代码的重要思想,反击DDD)

    阅读文件夹: 1.背景介绍 2.过程式代码的真正困境 3.工作单元模式的简单演示样例 4.总结 1.背景介绍 一直都在谈论面向对象开发.可是开发企业应用系统时.使用面向对象开发最大的问题就是在于,多个 ...