差别client、offset、scroll系列以及event的几个距离属性
element元素结点属性
一. offset系列
1.offsetWidth 和offsetHeight
element.offsetWidth是一个仅仅读属性,它包含了:
css width + padding+border+垂直滚动栏宽度
这里的滚动栏就是单纯滚动栏的意思,不包含不可见的部分哦。
而element.offsetHeight与之相似,仅仅是改为垂直方向而已。
在页面布局中要计算和考虑的盒子的宽度和高度通经常使用这个属性。
2.offsetParent
element.offsetParent是一个仅仅读属性,返回一个对象的引用,这个引用指向了element(调用offsetParent)的近期一个使用了定位(absolute、relative)的父元素,假设没有定位了的父元素,则指向根元素(标准模式下为 html。quirks 模式下为 body)。
兼容性:
在 Webkit 中,假设元素为隐藏的(该元素或其祖先元素的 style.display 为 “none”),或者该元素的 style.position 被设为 “fixed”。则该属性返回 null。
在 IE 9 中,假设该元素的 style.position 被设置为 “fixed”,则该属性返回 null。(display:none 无影响。)
3.offsetTop和offsetLeft
element.offsetTop 和 element.offsetLeft 都是相对于offsetParent的内边距(外)边界的。
也就是返回对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量。这里。元素对象左上角顶点是要从border開始算(假设有的话。即border边界距离offsetParent padding边界的距离,不是从从元素的margin開始算),offsetParent的左上角是指其padding边界。
在元素定位中通常使用这个属性来获取定位元素的top和left样式值。
參考资料:
前端攻城狮学习笔记九:让你彻底弄清offset
HTMLElement.offsetParent
二. client系列
1.clientHeight和clientWidth
element.clientHeight表示元素可视区域的高度。包含可视区域中元素的
CSS height+padding
不包含边框、滚动栏、不可见部分、margin。
clientWidth相似。仅仅只是是水平方向。
比如document.documentElement.clientWidth是整个文档的可视区宽度。
2.clientLeft和clientTop
是元素
padding外边界与父元素的padding边界的距离-元素的offsetLeft值,就等于元素的左边框宽度。???不知道理解对没
clientTop与之相似。
三. scroll系列
1.scrollHeight和scrollWidth
element.scrollHeight属性是仅仅读的,它包含:
可见CSS高度+padding+border+因为overflow设置为隐藏或者scroll而不可见的内容高度。
可看出和offsetHeight的差别就是多了个不可见内容区高度。scrollWidth与之相似。
2.scrollTop和scrollLeft
即是被scroll了的内容区域的高度和宽度。隐藏不可见的内容区域。
注意:
元素设置了overflow: scroll,滚动栏是占领了元素原来CSS宽度的一部分。即加了滚动栏后,元素CSS中定义的属性width=滚动栏宽度+content 宽度。边框是加在滚动栏外面的,而padding则是加在滚动栏内部。内容区之外的。
一个盒子设置了margin-top。是和别的盒子间的垂直距离,这个别的盒子不包含父盒子,也就是说,内部盒子顶部和父盒子边界的距离不变,而是整个父盒子顶部都和更外部的环境相距了margin-top值的距离。
參考资料:
Mozilla文档上的图示描写叙述得非常明确
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight
event事件对象属性
以下几个是event事件对象的属性,可获取鼠标的位置:
1.clientX。clientY
表示鼠标位置距离可视窗体边缘的距离。它们是事件对象的属性。这2个属性不是标准属性,但得到了广泛支持。
IE事件中没有这2个属性。
2. pageX,pageY
表示鼠标位置距离整个文档页面边缘(左和上边缘)的距离
3.screenX,screenY
表示鼠标位置距离屏幕边缘的距离
4.offsetX,offsetY:
鼠标相对于事件源元素(srcElement)的X,Y坐标,仅仅有IE事件有这2个属性,标准事件没有相应的属性。
来看个小样例。尾随鼠标的提示框:
//css
#info {position:absolute;}
//html
<div id="info"></div>
//js
document.onmousemove=function(ev){
var oEvent=ev||event;
var info=document.getElementById('info');
//获取不可见内容高度
var scrollTop=document.documentElement.scrollTop||
document.body.scrollTop//?
??混杂模式和标准模式下都能工作?
info.style.left=oEvent.clientX+'px';
info.style.top=oEvent.clientY+scrollTop+'px'; //可视区高度+scrolled的高度
}
document.documentElement指向document对象的根元素,在html文档中就是html元素。
经验:仅仅要在用到clientX和clientY的地方都最好加上scroll值。
差别client、offset、scroll系列以及event的几个距离属性的更多相关文章
- 区别client、offset、scroll系列以及event的几个距离属性
element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个只读属性,它包括了: css width + p ...
- client , offset , scroll 系列 及百度导航栏案例
1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- client,offset,scroll系列
client(客户端),offset(偏移),scroll(滚动)1.client系列 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域到边框左部 ...
- DOM盒模型和位置 client offset scroll 和滚动的关系
DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...
- JS中client/offset/scroll等的宽高解析
原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...
- client offset scroll 之间的区别
一.client 属性 值 clientWidth 元素被设置的宽度 + padding左右内间距 clientHeight 元素被设置的高度 + padding上下内间距 clientLeft 左 ...
- JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 分类: JavaScript HTML+CSS 2015-05-27 16:42 635人阅读 评论(0) 收藏
原文地址:http://caibaojian.com/js-name.html JS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词 ...
- JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度
Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth ...
随机推荐
- 百度背景画面切换效果,js做
<!DOCTYPE html><html><head> <title>baidu</title> <meta charset=&quo ...
- JavaScript网页制作特效
一.什么是JavaScript? 网页交互特效的脚本语言. 特效 二.BOM对象 能够使得JavaScript和浏览器进行对话. 主要是使用Window对象进行操作. History对象:历史,可以实 ...
- SGU131--NYOJ435
参考blog http://m.blog.csdn.net/blog/u012760629/36927465 http://www.cppblog.com/menrowitianya/archive/ ...
- Android 软件盘 动态设置 layout
总体来说分为三种方法: 在编辑框输入内容时会弹出软键盘,而手机屏幕区域有限往往会遮住输入界面,我们先看一下问题效果图: 输入用户名和密码时,系统会弹出键盘,造成系统键盘会挡住文本框的问题,如图所示: ...
- linux 分区
1.硬盘分区分为基本分区和扩展分区, 扩展分区分下去就是逻辑分区,而且逻辑分区没有数量上的限制. 2.查看linux系统分区具体情况 fdisk - l 3.查看某个目录是哪个分区下的 df /boo ...
- wsdl和wadl区别
[转]http://blog.csdn.net/liuxiao723846/article/details/51611183 1.Java开发WebService最重要的两个规范: JSR-224 ( ...
- Android开发之InstanceState详解(转)
本文来自:http://www.cnblogs.com/hanyonglu/archive/2012/03/28/2420515.html 本文介绍Android中关于Activity的两个神秘方法: ...
- ubuntu 下telnet 操纵memcache 实现
memcache作为一款优秀的进程外缓存,常常被运用于高并发系统架构中.这里主要谈谈怎么通过telnet工具,查看memcache运行状况并对其key进行管理维护.假设memcache安装目录:/us ...
- PHP几个防SQL注入攻击自带函数区别
SQL注入攻击是黑客攻击网站最常用的手段.如果你的站点没有使用严格的用户输入检验,那么常容易遭到SQL注入攻击.SQL注入攻击通常通过给站点数据库提交不良的数据或查询语句来实现,很可能使数据库中的纪录 ...
- Math对象
<script type="text/javascript"> /* Math对象常用的方法: ceil 向上取整 floor() 向下取整 random() 随机数方 ...