javascript中常用坐标属性offset、scroll、client
来源:互联网 发布:一代宗师经典台词 知乎 编辑:程序博客网 时间:2024/05/21 12:50
参考
1、在文档(document)对象里面用:
scrollWidth/Height:获取对象的滚动宽度(滚动条可以滚动的宽度,相当于整个页面的总宽度的样子–网页正文全宽;IE下有单位)
var scrollWidth=document.body.scrollWidth || document.documentElement.scrollWidth;var scrollHeight=document.body.scrollHeight || document.documentElement.scrollHeight;
scrollLeft/Top:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(页面利用滚动条滚动到右边时,隐藏在滚动条左边的页面宽度—页面被卷去左边)
var scrollTop=document.body.scrollTop ||document.documentElement.scrollTop;var scrollLeft=document.body.scrollLeft ||document.documentElement.scrollLeft;
2、在节点对象里面用:
offsetLeft/Top:获取对象相对于版面(css里面没有进行定位,则offsetParent取值为根元素进行计算)或由 offsetParent 属性指定的父坐标的计算左侧位置(当有css定位时,当前对象相对与offsetParent元素的距离)
body{ width:2000px; height: 5000px;}.box1{ height:200px; border:20px solid #f00; padding: 20px; margin:20px; position: relative;}.box2{ width:100px; height:100px; border: 10px solid #ff0; padding: 10px; margin:10px; position: absolute; top: 20px; left: 32px;}body>div.box1>div.box2box1.offsetParent;//bodybox1.offsetParent.offsetLeft/offsetTop;//0box1.offsetLeft;//28(margin+浏览器默认外边距)box1.offsetTop;//20(margin-top)box2.offsetParent;//box1box2.offsetLeft;//42(left+margin-left)box2.offsetTop;//30(top+margin-top)PS:定位元素是从父元素(带有相对定位)border内侧开始的忽略父元素的padding,而本身是从margin开始算起;
offsetWidth/Height (width+padding+border)
获取当前对象的宽度。
style.width也是当前对象的宽度(width+padding+border)。
区别:1)style.width返回值除了数字外还带有单位px;
2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值;
3)如果没有给 HTML 元素指定过 width样式,则 style.width 返回的是空字符串;
box1.offsetParent.offsetWidth;//2000box1.offsetParent.offsetHeight;//5000box1.offsetWidth;//280box1.offsetHeight;//280box2.offsetWidth;//140box2.offsetHeight;//140
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:
获取对象可见内容的宽度,不包括滚动条,不包括边框;
box1.offsetParent.clientWidth;//2000box1.offsetParent.clientHeight;//5000box1.clientWidth;//240(width+padding)box1.clientHeight;//240(height+padding)box2.clientWidth;//120(width+padding)box2.clientHeight;//120(height+padding)
clientLeft/Top(没有right和bottom):
获取对象的border宽度
box1.offsetParent.clientLeft;//0box1.offsetParent.clientTop;//0box1.clientLeft;//20(border)box1.clientTop;//20(border)box2.clientLeft;//10(border)box2.clientTop;//10(border)
3、事件里面用的(触发事件鼠标的相对坐标):
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
4、屏幕的:
window.screenTop 网页正文部分上
window.screenLeft 网页正文部分左
window.screen.height 屏幕分辨率的高
window.screen.width 屏幕分辨率的宽
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
- JS中常用坐标offset、scroll、client的区别(转载)
- JS中常用坐标offset、scroll、client的区别
- JS中常用坐标offset、scroll、client的区别
- JS常用坐标offset、scroll、client区分
- javascript的offset、client、scroll使用方法,相关属性解释原理
- JavaScript client、offset、scroll 属性获取元素大小及偏移
- JavaScript中的offset、scroll、client
- javascript的offset、client、scroll
- 轻松弄清 JavaScript中的offset、scroll、client
- javascript的offset、client、scroll使用方法详解
- 轻松弄清JavaScript中的offset、scroll、client
- 轻松弄清JavaScript中的offset、scroll、client
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
- js的element中,属性以scroll、client和offset为前缀的属性的区别
- offset+client+scroll
- client,offset,scroll理解
- offset、client、scroll
- 《Linux命令行大全》学习笔记(一)
- 学生成绩管理系统
- 直接插入排序和希尔排序
- 第二章 身份验证 (二) 身份认证流程
- 数据库(第一范式,第二范式,第三范式)
- javascript中常用坐标属性offset、scroll、client
- 内核源码阅读(三)进程命名空间和用户命名的实现
- HDOJ 2616 Kill the monster (DFS)
- 安卓微信支付回调出现白页面
- 简单Web应用框架设计
- STL中的set学习笔记
- C. Valera and Elections----树形dp
- Java2
- web11天mysql高级知识