javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全詳解
更新時(shí)間：2009年07月09日 00:33:17 作者：
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全詳解,實(shí)例修正版。
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置
event.clientX 相對文檔的水平座標(biāo)
event.clientY 相對文檔的垂直座標(biāo)
event.offsetX 相對容器的水平坐標(biāo)
event.offsetY 相對容器的垂直坐標(biāo)
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標(biāo)+垂直方向滾動的量
以上主要指IE之中，F(xiàn)ireFox差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān))
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置
event.clientX 相對文檔的水平座標(biāo)
event.clientY 相對文檔的垂直座標(biāo)
event.offsetX 相對容器的水平坐標(biāo)
event.offsetY 相對容器的垂直坐標(biāo)
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標(biāo)+垂直方向滾動的量
以上主要指IE之中，F(xiàn)ireFox差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關(guān))
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
這篇文章主要介紹了JavaScript面向?qū)ο缶幊痰南嚓P(guān)概念，例如類、對象、屬性、方法等面向?qū)ο蟮男g(shù)語，并以實(shí)例講解各種術(shù)語的使用，非常好的一篇面向?qū)ο笕腴T教程,其它語言也可以參考哦2014-04-04
深入理解JavaScript系列（42）：設(shè)計(jì)模式之原型模式詳解
這篇文章主要介紹了深入理解JavaScript系列（42）：設(shè)計(jì)模式之原型模式詳解,原型模式（prototype）是指用原型實(shí)例指向創(chuàng)建對象的種類,并且通過拷貝這些原型創(chuàng)建新的對象,需要的朋友可以參考下2015-03-03
下面小編就為大家?guī)硪黄獪\談JavaScript的內(nèi)置對象和瀏覽器對象。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家介紹了TypeScript基礎(chǔ)class類教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-02-02
JAVASCRIPT對象及屬性...2007-02-02
本文向大家詳細(xì)的介紹了javascript中的String對象的簡介、定義方式、實(shí)例屬性和實(shí)例方法，非常的細(xì)致全面，這里推薦給大家，希望對大家能夠有所幫助。2015-03-03
做網(wǎng)頁的一些技巧（續(xù)）...2007-02-02
splice slice區(qū)別...2006-10-10
JavaScript parseInt()與Number()區(qū)別案例詳解
這篇文章主要介紹了JavaScript parseInt()與Number()區(qū)別案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
優(yōu)化JavaScript腳本的性能的幾個注意事項(xiàng)
優(yōu)化JavaScript腳本的性能的幾個注意事項(xiàng)...2006-12-12