JavaScript中的各种宽高以及位置总结

标签: javascript | 发表时间:2015-02-09 00:50 | 作者:kidsamong
出处:http://segmentfault.com/blogs

在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之间

实现方式不同,常常会造成概念混淆,经过研究之后,这里来进行一个总结。

第一部分:DOM对象

1.1只读属性

所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下:

1)clientWidth和clientHeight

该属性指的是元素的可视部分宽度和高度,即padding+content,如果没有滚动条,即为元素设定的高度和宽度,如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高

css:

      <style>
        .one{
            width: 200px;
            height: 200px;
            background: red;
            border: 1px solid #000000;
            overflow: auto;
        }
    </style>

HTML

  <body>
<div class="one">
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
    javascript高级应用<br>
</div>
</body>

js

  <script>
    window.onload=function(){
        var oDiv=document.getElementsByTagName('div')[0];
        console.log(oDiv.clientWidth+":"+oDiv.clientHeight);
    }
</script>

结果:

clipboard.png

元素本来设定为宽高都是200,即可视部分宽高都是200,但是由于出现了垂直方向的滚动条,占据了可视部分的宽度,所以clientWidth变成了183,而clientHeight依然是200.

2)offsetWidth和offsetHeight

这一对属性指的是元素的border+padding+content的宽度和高度,该属性和其内部的内容是否超出元素大小无关,只和本来设定的border以及width和height有关

css和HTML部分同上,js部分如下:

   <script>
    window.onload=function(){
        var oDiv=document.getElementsByTagName('div')[0];
        console.log(oDiv.offsetWidth+":"+oDiv.offsetHeight);
    }
</script>

最终结果:

可以看到该属性和clientWidth以及clientHeight相比,多了设定的边框border的宽度和高度。

3)clientTop和clientLeft

这一对属性是用来读取元素的border的宽度和高度的。

css

  <style>
    body{
        border: 2px solid #000000;
    }
    .one{
        border: 1px solid red;
        width: 100px;
        height: 100px;
        background: red;
    }
</style>

html

  <body>
<div class="one">
</div>
</body>

js

  <script>
    var oDiv=document.getElementsByClassName('one')[0];
    console.log(oDiv.clientLeft+":"+oDiv.clientTop);
</script>

最终结果:

clipboard.png

 可以看到div的border被设定了1px的宽,这里显示的就是它的宽度

4)offsetLeft和offsetTop

说到这对属性就需要说下offsetParent,所谓offsetParent指的是当前元素的离自己最近的具有定位的(position:absolute或者position:relative)父级元素(不仅仅指的是直接父级元素,只要是它的父元素都可以),该父级元素就是当前元素的offsetParent,如果从该元素向上寻找,找不到这样一个父级元素,那么当前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是当前元素,相对于其offsetParent左边距离和上边距离,即当前元素的border到包含它的offsetParent的border的距离如下所示:

css

  <style>
    .two{
        position: relative;
        width: 200px;
        height: 200px;
        border: 1px solid green;
    }
    .one {
        width: 100px;
        height: 100px;
        background: red;
        margin: 20px;
        border: 1px solid #000000;
        position: absolute;
        top:20px;
    }

</style>

HTML

  <body>
<div class="two">
<div class="one">
</div>
</div>
</body>

js

  <script>
    var oDiv=document.querySelector('.one');
    console.log(oDiv.offsetTop+":"+oDiv.offsetLeft);
</script>

最终结果:

clipboard.png

 这里让div.two相对定位,让div.one绝对定位,所以div.two是one的offsetParent,同时,又给div.one加了一个margin为20px,所以这里它的offsetTop为40,offsetLeft 本来为0,但是加上margin为20之后就变成了20.

5)scrollHeight和scrollWidth

顾名思义,这两个属性指的是当元素内部的内容超出其宽度和高度的时候,元素内部内容的实际宽度和高度,需要注意的是,当元素其中内容没有超过其高度或者宽度的时候,该属性是取不到的。

css

  <style>
    .one{
        width: 100px;
        height: 100px;
        overflow: auto;
    }
</style>

HTML

  <body>
<div class="one">
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
    我是内容<br>
</div>
</body>

js

  <script>
    var oDiv=document.querySelector('.one');
    oDiv.onscroll=function(){
        console.log(this.scrollHeight+":"+this.scrollWidth);
    }
</script>

最终结果

clipboard.png

 尽管该div的宽高都是100,但是其scrollheight为234显示的是其中内容的实际高度,scrollWidth为83(由于滚动条占据了宽度)

1.2可读可写属性

所谓的可读可写属性指的是不仅能通过js获取该属性的值,还能够通过js为该属性赋值。

1)scrollTop和scrollLeft

这对属性是可读写的,指的是当元素其中的内容超出其宽高的时候,元素被卷起的高度和宽度。

css和html部分同上,js部分如下:

  <script>
    var oDiv=document.querySelector('.one');
    oDiv.onscroll=function(){
        console.log(this.scrollTop+":"+this.scrollLeft);
    }
</script>

最终结果:

clipboard.png

由于拖动了滚动条,scrollTop的属性值一直在增大,而水平方向没有滚动条,所以scrollLeft一直为0.

该属性还可以通过赋值内容自动滚动到某个位置,js如下:

  <script>
    var oDiv=document.querySelector('.one');
    oDiv.scrollTop=20;
    oDiv.onscroll=function(){
        console.log(this.scrollTop+":"+this.scrollLeft);
    }
</script>

结果如下:

clipboard.png

通过直接设定div的scrollTop,让它直接显示在滚动条在20垂直方向上20的位置。

2)obj.style.*属性

对于一个dom元素,它的style属性返回的是一个对象,这个对象中的任意一个属性是可读写的。如obj.style.top,obj.style.wdith等,在读的时候,他们返回的值常常是带有单位的(如px),同时,对于这种方式,

它只能够获取到该元素的行内样式,而并不能获取到该元素最终计算好的样式,这就是在读取属性值得时候和以上只读属性的区别,要获取计算好的样式,请使用obj.currentstyle(IE)和getComputedStyle(IE之外的浏览器)。另一方面,这些属性能够被赋值,js运动的原理就是通过不断修改这些属性的值而达到其位置改变的,需要注意的是,给这些属性赋值的时候需要带单位的要带上单位,否则不生效。

第二部分 Event对象

在js中,对于元素的运动的操作通常都会涉及到event对象,而event对象也存在很多位置属性,且由于浏览器兼容性问题会导致这些属性间相互混淆,这里一一讲解。

1)clientX和clientY,这对属性是当事件发生时,鼠标点击位置相对于浏览器(可视区)的坐标,即浏览器左上角坐标的(0,0),该属性以浏览器左上角坐标为原点,计算鼠标点击位置距离其左上角的位置,

不管浏览器窗口大小如何变化,都不会影响点击位置的坐标。

js

<script> var oDiv=document.querySelector('.one'); oDiv.onclick=function(ev){ var evt=ev||event; console.log(evt.clientX+":"+evt.clientY); } </script>

结果:

clipboard.png

2)screenX和screenY是事件发生时鼠标相对于屏幕的坐标,以设备屏幕的左上角为原点,事件发生时鼠标点击的地方即为该点的screenX和screenY值,如下所示:

clipboard.png

可以看到尽管浏览器窗口被缩到很小,但是坐标值却很大,因为是相对于屏幕坐标而不是浏览器的坐标。

3)offsetX和offsetY

这一对属性是指当事件发生时,鼠标点击位置相对于该事件源的位置,即点击该div,以该div左上角为原点来计算鼠标点击位置的坐标,如下所示:

clipboard.png

可以看到,点击该div的靠近左上角处,它的offsetX和offsetY为1,0,需要注意的是,IE,chrome,opera都支持该属性,唯独Firefox不支持该属性,Firefox中与此属性相对应的概念是,event.layerX和event.layerY,所以需要兼容浏览器时,获取鼠标点击位置相对于事件源的坐标的兼容写法为var disX=event.offsetX||event.layerX.

4)pageX和pageY

顾名思义,该属性是事件发生时鼠标点击位置相对于页面的位置,通常浏览器窗口没有出现滚动条时,该属性和event.clientX及event.clientY是等价的,但是当浏览器出现滚动条的时候,pageX通常会大于clientX,因为页面还存在被卷起来的部分的宽度和高度,如下所示:

clipboard.png

由于浏览器出现了垂直和水平的滚动条,所以pageX和pageY大于clientX和clientY。

当浏览器的滚动条没有被拖动或者浏览器没有滚动条的时候,两者是相等的。

clipboard.png

文章转自 js中的各种宽高以及位置总结

相关 [javascript 位置 总结] 推荐:

JavaScript中的各种宽高以及位置总结

- - SegmentFault 最新的文章
在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之间. 实现方式不同,常常会造成概念混淆,经过研究之后,这里来进行一个总结. 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下:.

Javascript和CSS浏览器兼容总结

- Keel - ITeye资讯频道
这篇文章重点总结了Javascript和CSS浏览器兼容性问题. document.form.item 问题. 代码中存在 document.formName.item(“itemName”). 这样的语句,不能在FIREFOX下运行. 改用 document.formName.elements["elementName"].

JavaScript跨域总结与解决办法

- - CSDN博客推荐文章
1、document.domain+iframe的设置. 3、利用iframe和location.hash. 4、window.name实现的跨域数据传输. 5、使用HTML5 postMessage. 本文来自网络(http://f2e.me/200904/cross-scripting/,该网址已不能访问),仅作个人读书笔记之用,并稍作修改和补充.

总结javascript的那些怪癖

- - CSDN博客Web前端推荐文章
 * @content 总结javascript的那些怪癖(trick)   .  * trick01:NaN是个数值.  * NaN:表示某个值不是数值,但其本身又是数值,且不等于其自身.  * trick02:Null是个对象.  * Null:javascript中的五大基本类型之一,它有个唯一的值null, 即它的字面量,定义为完全没有任何意义的值.

JavaScript 跨域总结与解决办法

- - 博客 - 伯乐在线
JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象. 但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦. 这里把涉及到跨域的一些问题简单地整理一下:. 首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象.

JavaScript性能优化小知识总结

- - 码农网
JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 一直在学习javascript,也有看过《犀利开发Jquery内核详解与实践》,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解.

(总结)简体繁体转换JS(JavaScript)脚本

- - 服务器运维与网站架构|Linux运维|X研究
PS:前些时间有童鞋问我怎么把繁体网站自动辨认浏览器来切换成简体. 这个其实很简单,我在07年的时候的公司运营的香港讨论区就用过,只需加个JS脚本,再加几行html代码嵌入就OK. 现重新记录一下,有两个版本测试可用. 1、首先把下面这个链接放在提醒用户繁简转换的地方:. <a href="" id="StranLink">繁体中文</a>.

JavaScript开发中几个常用知识点总结

- - JavaScript - Web前端 - ITeye博客
一、三种声明函数的方式. function functionName(arg1, arg2) {alert(arg1+arg2);}2、匿名函数. var functionName1 = new Function("arg1", "arg2", "alert(arg1 + arg2)");3、直接量函数.

[总结贴] 十个 JavaScript 中易犯的小错误

- - SegmentFault 最新的文章
在今天,JavaScript已经成为了网页编辑的核心. 尤其是过去的几年,互联网见证了在SPA开发、图形处理、交互等方面大量JS库的出现. 如果初次打交道,很多人会觉得js很简单. 确实,对于很多有经验的工程师,或者甚至是初学者而言,实现基本的js功能几乎毫无障碍. 但是JS的真实功能却比很多人想象的要更加多样、复杂.

Javascript诞生记

- Milido - 阮一峰的网络日志
二周前,我谈了一点Javascript的历史. 今天把这部分补全,从历史的角度,说明Javascript到底是如何设计出来的. 只有了解这段历史,才能明白Javascript为什么是现在的样子. 我依据的资料,主要是Brendan Eich的自述. "1994年,网景公司(Netscape)发布了Navigator浏览器0.9版.