javascript 宽度和高度

宽度和高度

对于编写css代码时，宽度和高度就是width和height

但是在JavaScript中，还有其他的宽度和高度，比如offsetWidth，offsetHeight，clientX，clientY，clientWidth，clientHieght，pageX，pageY,scrollWidth，scrollHeight等等这些，用的地方很多，但很少明白它们之间的区别，以及它们主要用在什么地方。

下面我将详细地说明它们具体是做什么的，以及它们之间的区别。

width：设置元素的宽度，定义元素内容区域的宽度。另外，width设置100%和auto是有区别的。

设置为100%，是不包含margin-left和margin-right属性值的；

设置为auto，是包含margin-left和margin-right属性值的。width：auto;总是占据整行的。

height：设置元素的高度，定义元素内容区域的高度。另外，增加内边距，边框，外边距不会影响内容区域的尺寸，但会影响元素框的尺寸。

offsetWidth：(width+padding+border)对象整体的实际宽度，包含滚动条，会随对象的显示大小而变化

offsetHeight：(height+padding+border)当前对象的实际高度

 

clientWidth：对象的内容可视区域，不包括滚动条会随着对象的显示大小而变化

clientHeight：对象可见内容的高度，不包含滚动条，不包含边框

scrollWidth：对象实际内容的宽度，不包含边线，会随着对象的内容区域超过可视区后而变大

scrollHeight：对象的滚动宽度，不包含滚动条，不包含边框

IE6.0

clientWidth = width + padding

clientHeight = height +padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

情况1：

元素无内容或内容不超过可视区，滚动不出现或不可用的情况下，

scrollWidth=clientWidth，两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

情况2：

元素的内容超过可视区域，滚动条出现和可用的情况下。

scrollWidth>clientWidth，scrollWidth为实际内容的宽度，clientWidth是内容可视区域的宽度，offsetWidth是元素的实际宽度。

pageX：页面坐标的位置，属性表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和定边计算的。

pageY：页面的垂直坐标位置

在页面没有滚动的情况下，pageX和pageY的值与clientX和clientY的值相等。

IE8及之前的版本不支持事件对象上的页面坐标，不过使用客户区坐标和滚动信息可以计算出来。这时候需要用到document.body(混杂模式)和document.documentElement(标准模式)的scrollLeft和scrollTop属性。

clientX：事件属性返回当前事件被触发时鼠标指针指向对于浏览器页面的水平坐标,它们的值表示事件发生时鼠标指针

clientY：事件属性返回当前事件被触发时鼠标指针指向对于浏览器页面的垂直坐标