首頁  >  文章  >  web前端  >  scrollWidth,clientWidth與offsetWidth的區別_經驗交流

scrollWidth,clientWidth與offsetWidth的區別_經驗交流

PHP中文网
PHP中文网原創
2016-05-16 12:07:351631瀏覽

scrollwidth,clientwidth與offsetwidth的區別_經驗交流

scrollwidth 
是對象的實際內容的寬,不包邊線寬度,會隨對象內容的多少改變(內容多了可能改變物體的實際寬度)。
clientwidth 
是物件可見的寬度,不包捲軸等邊線,會隨視窗的顯示大小改變。 
offsetwidth 
是物件的可見寬度,包包捲軸等邊線,會隨視窗的顯示大小改變。 

一個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>

 
在文字方塊內輸入內容,當橫向滾動條沒出來前scrollwidth和clientwidth的值是一樣的。當一行內容超出文字方塊的寬度,就有橫向捲軸出來了,scrollwidth的值就變了。 
scrollwidth是物件實際內容的寬度。 
clientwidth是物件看到的寬度(不含邊線),這個範例裡不會改變。 

一個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是物件看到的寬度(含邊線,如滾動條的佔用的寬) 

以上就是scrollwidth,clientwidth與offsetwidth的差別_經驗交流的內容,更多相關內容請關注php中文網(www.php.cn)!


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn