scrollWidth,clientWidth與offsetWidth的區(qū)別
更新時(shí)間：2007年08月22日 20:27:50 作者：
scrollWidth
是對象的實(shí)際內(nèi)容的寬，不包邊線寬度，會(huì)隨對象中內(nèi)容的多少改變（內(nèi)容多了可能會(huì)改變對象的實(shí)際寬度）。
clientWidth
是對象可見的寬度，不包滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變。
offsetWidth
是對象的可見寬度，包滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變。
一個(gè)scrollWidth和clientWidth的例子：
<html>
<head>
<title>77.htm文件</title>
</head>
<body>
<textarea wrap="off" onfocus="alert('scrollWidth:'+this.scrollWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
在文本框內(nèi)輸入內(nèi)容，當(dāng)橫向滾動(dòng)條沒出來前scrollWidth和clientWidth的值是一樣的。當(dāng)一行內(nèi)容超出文本框的寬度，就有橫向滾動(dòng)條出來了，scrollWidth的值就變了。
scrollWidth是對象實(shí)際內(nèi)容的寬度。
clientWidth是對象看到的寬度（不含邊線），這個(gè)例子里不會(huì)改變。
一個(gè)clientWidth和offsetWidth的例子：
<html>
<head>
<title>77.htm文件</title>
</head>
<body>
<textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
offsetWidth的值總是比clientWidth的值大。
clientWidth是對象看到的寬度（不含邊線）
offsetWidth是對象看到的寬度（含邊線，如滾動(dòng)條的占用的寬）
是對象的實(shí)際內(nèi)容的寬，不包邊線寬度，會(huì)隨對象中內(nèi)容的多少改變（內(nèi)容多了可能會(huì)改變對象的實(shí)際寬度）。
clientWidth
是對象可見的寬度，不包滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變。
offsetWidth
是對象的可見寬度，包滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變。
一個(gè)scrollWidth和clientWidth的例子：
<html>
<head>
<title>77.htm文件</title>
</head>
<body>
<textarea wrap="off" onfocus="alert('scrollWidth:'+this.scrollWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
在文本框內(nèi)輸入內(nèi)容，當(dāng)橫向滾動(dòng)條沒出來前scrollWidth和clientWidth的值是一樣的。當(dāng)一行內(nèi)容超出文本框的寬度，就有橫向滾動(dòng)條出來了，scrollWidth的值就變了。
scrollWidth是對象實(shí)際內(nèi)容的寬度。
clientWidth是對象看到的寬度（不含邊線），這個(gè)例子里不會(huì)改變。
一個(gè)clientWidth和offsetWidth的例子：
<html>
<head>
<title>77.htm文件</title>
</head>
<body>
<textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
offsetWidth的值總是比clientWidth的值大。
clientWidth是對象看到的寬度（不含邊線）
offsetWidth是對象看到的寬度（含邊線，如滾動(dòng)條的占用的寬）
相關(guān)文章
用css實(shí)現(xiàn)的訪問過的連接下面都有一個(gè)下劃線方便需要這種效果的朋友特整理如下2008-06-06
是否想不用photoshop來創(chuàng)建一個(gè)帶漸變的標(biāo)題文字嗎? 這里用一個(gè)簡單的css技巧來向你展示如何僅僅使用css和png圖片來制造這種效果.2008-05-05
下面是高手整理的一些javascript在ie和ff中的兼容寫法2008-10-10
z-index是CSS中控制元素層級的屬性，但其工作原理并不簡單。本文將深入探討z-index的工作原理，包括堆疊上下文、層疊順序和層疊上下文等概念，并介紹z-index的應(yīng)用技巧，如如何避免z-index的陷阱、如何使用z-index實(shí)現(xiàn)復(fù)雜布局等。2023-05-05
Web標(biāo)準(zhǔn)學(xué)習(xí)資源（書籍、網(wǎng)站）推薦
Web標(biāo)準(zhǔn)學(xué)習(xí)資源（書籍、網(wǎng)站）推薦...2007-02-02
html工作中表格<tbody>標(biāo)簽的使用技巧
公司大部分的項(xiàng)目都是基于BS結(jié)構(gòu)，UI設(shè)計(jì)階段做WEB原型頁面時(shí)要把各種交互效果實(shí)現(xiàn)出來，與真正的后臺編程不同，就用JS前臺編程來實(shí)現(xiàn)，讓程序員編程前知道要做成什么樣的效果就行了。2008-09-09
癥狀描述：在ie下（6或7，8沒有試過）當(dāng)出現(xiàn)中英文混排，都采用默認(rèn)字體時(shí)，并使用 li 列表做float時(shí)，會(huì)出現(xiàn)如上圖的癥狀，文字排列上下不對齊的情況。2008-08-08
DIV+CSS布局教程大全與pdf電子書 下載...2007-03-03
ASP、PHP與javascript根據(jù)時(shí)段自動(dòng)切換CSS皮膚的代碼
一個(gè)網(wǎng)站能切換不同的CSS風(fēng)格大家應(yīng)該都了解，像眾所周知的騰訊在今年改版時(shí)也增加了切換皮膚的功能。2008-09-09
web標(biāo)準(zhǔn)常見問題集合3...2006-11-11