scrollWidth,clientWidth與offsetWidth的區別_經驗交流-css教學-PHP中文網

首頁

web前端

css教學

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

PHP中文网

May 16, 2016 pm 12:07 PM

offsetwidth

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