开发学院网页设计 JavaScript javascript获得元素的尺寸和位置二 : clientWidth... 阅读

javascript获得元素的尺寸和位置二 : clientWidth/Height、scrollWidth/Height、scrollTop/Left

　2010-09-14 13:39:47　来源：WEB开发网　闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹

闂傚倷绀侀幉锟犲垂閻㈠灚宕查柟鎵閸庡秵銇勯幒鎴濃偓鐢稿磻閹炬枼妲堟繛鍡楃С濞岊亞绱撻崒姘扁枌闁瑰嚖鎷�

婵犵數濮幏鍐川椤撴繄鎹曢梻渚€娼уú銈吤洪妸鈺佺劦妞ゆ帊鑳堕埊鏇㈡煏閸モ晛浠х紒杈╁仱閺佹捇鏁撻敓锟�闂傚倷绶氬ḿ褍螞閹绢喖绠柨鐕傛嫹　　闂傚倷鑳舵灙缂佺粯顨呴埢宥夊即閵忕姵鐎梺缁樺姇閻忔氨鈧凹鍓熷娲垂椤曞懎鍓伴梺閫炲苯澧紒澶婄秺瀵濡歌閸嬫捇妫冨☉娆忔殘闂佷紮缍€娴滎剟鍩€椤掑倹鏆柛瀣躬瀹曚即寮借閺嗭箓鏌ㄩ悤鍌涘

核心提示：1、clientWidth clientHeight元素的可视部分的宽度和高度（也就是CSS的width加padding），它们不把边框和滚动条计算在内，javascript获得元素的尺寸和位置二 : clientWidth/Height、scrollWidth/Height、scrollTop/Left，也不包括任何

1、clientWidth clientHeight

元素的可视部分的宽度和高度（也就是CSS的width加padding）。它们不把边框和滚动条计算在内，也不包括任何可能的滚动。

若CSS中没有指定元素的高度和宽度(即自适应)，则IE中显示0，而非IE浏览器则显示实际的值

2、 offsetWidth offsetHeight

元素在页面中占据的宽度和高度的总计。它们和前一对属性的区别在于它们把元素的边框和滚动条计算在内。

若CSS中没有指定元素的高度和宽度(即自适应)，所有浏览器都会显示实际的值包括width + padding + border

3、 scrollWidth scrollHeight

给出设置了overflow:visible的元素总的宽度和高度。如果这个宽度和高度大于clientWidth和clientHeight，该元素就需要滚动条。

width + padding + border

overflow:hidden/scroll 时，所有浏览器都会返回该元素的全部显示时的值

overflow:visible 时，google chrome、Safari、IE会显示元素全部显示时的值，而FF、Opera会显示应当显示的区域的值

该属性有很多的Bug，所以在具体应用时，用处很少。