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边界。

参考资料: 
前端攻城狮学习笔记九:让你彻底弄清offset 
HTMLElement.offsetParent

二. client系列

1.clientHeight和clientWidth

element.clientHeight表示元素可视区域的高度,包括可视区域中元素的

CSS height+padding

不包括边框、滚动条、不可见部分、margin。 
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的几个距离属性的更多相关文章

  1. 差别client、offset、scroll系列以及event的几个距离属性

    element元素结点属性 一. offset系列 1.offsetWidth 和offsetHeight element.offsetWidth是一个仅仅读属性,它包含了: css width + ...

  2. client , offset , scroll 系列 及百度导航栏案例

    1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  3. client,offset,scroll系列

    client(客户端),offset(偏移),scroll(滚动)1.client系列 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域到边框左部 ...

  4. DOM盒模型和位置 client offset scroll 和滚动的关系

    DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...

  5. client offset scroll 之间的区别

    一.client 属性 值 clientWidth 元素被设置的宽度 + padding左右内间距 clientHeight 元素被设置的高度 + padding上下内间距 clientLeft 左 ...

  6. JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  7. 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.名词 ...

  8. JS中client/offset/scroll等的宽高解析

    原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...

  9. JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度

    Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth ...

随机推荐

  1. 分享一个低配VPS下运行的mysql配置文件

    在各种内存CPU核心只有1/2核,内存只有512M/1G的vps下,内存.CPU.硬盘都不是太充裕.因此主要思路是,禁止吃内存大户innodb引擎,默认使用MyISAM.禁止吃硬盘大户log-bin, ...

  2. MaterialDrawer开源侧滑菜单的使用手册

    官方有详细说明,但是我首次查找的时候并没有第一眼就能使用全部功能,而网上也查找了一下,几乎所有的博客都是简简单单的几句代码...连句说明都没有,可能是我这小菜鸡理解能力不行,或者大神们认为coding ...

  3. 在my.ini文件中配置mysql统一字符集

    测试的mysql版本为:5.7.14 查看mysql字符集命令: show variables like 'character_set_%'; 以下是在my.ini文件中配置mysql统一字符集参数: ...

  4. 什么是javascript中的静态方法?一个例子让你懂~!

    function Foo(){ this.age = 28};var a = new Foo();alert(a.age);//28alert(a.name);//undifined Foo.name ...

  5. 拉普拉斯矩阵(Laplace Matrix)与瑞利熵(Rayleigh quotient)

    作者:桂. 时间:2017-04-13  07:43:03 链接:http://www.cnblogs.com/xingshansi/p/6702188.html 声明:欢迎被转载,不过记得注明出处哦 ...

  6. Java线程池(ThreadPool)详解

    线程五个状态(生命周期): 线程运行时间 假设一个服务器完成一项任务所需时间为:T1 创建线程时间,T2 在线程中执行任务的时间,T3 销毁线程时间.    如果:T1 + T3 远大于 T2,则可以 ...

  7. javascript继承详解(待续)

    常见继承分两种,一种接口继承,继承方法签名:一种实现继承,继承实际方法.js只支持后一种. 1原型链 首先看原型.构造函数.实例的关系.如果我们让一个函数的原型对象等于另一个的实例,然后另一个的原型对 ...

  8. C#变量、常量、枚举、预处理器指令知多少

    一.变量 C#共有其中变量类型有:静态变量.实类变量.数组元素.数值参数.引用参数.输出参数和局部变量 先定义一个简单的类来说明,如下: public class VariableDefine { p ...

  9. idea 集成sonarLint

    1.目标 idea集成sonar的代码检查,实现可以在提交代码前就检查你的代码,而不是将代码提交之后,之后再去检查. Sonar可以从以下七个维度检测代码质量,而作为开发人员至少需要处理前5种代码质量 ...

  10. jsp之session对象

    jsp之session对象:一:概念session对象可以在应用程序的web页面之间跳转时保存用户的信息,使整个用户会话一直存在,直到关闭浏览器或是销毁session.session的生命周期:20~ ...