Rumah > Artikel > hujung hadapan web > Perbezaan antara scrollWidth, clientWidth dan pertukaran offsetWidth_Experience

Perbezaan antara scrollWidth, clientWidth dan pertukaran offsetWidth_Experience

PHP中文网asal: 2016-05-16 12:07:351663semak imbas

Perbezaan antara scrollWidth, clientWidth dan offsetWidth_Experience exchange

scrollWidth
ialah lebar kandungan sebenar objek, tidak termasuk lebar tepi dan akan berubah dengan kandungan daripada objek (Lebih banyak kandungan boleh mengubah lebar sebenar objek).
clientWidth
ialah lebar objek yang boleh dilihat, tidak termasuk bar skrol dan tepi lain, dan akan berubah mengikut saiz paparan tetingkap.
offsetWidth
ialah lebar objek yang boleh dilihat, termasuk bar skrol dan tepi lain, yang akan berubah mengikut saiz paparan tetingkap.

Contoh scrollWidth dan clientWidth:

<html>  
<head>  
<title>77.htm文件</title>  
</head>  
<body>  
<textarea wrap="off" onfocus="alert(&#39;scrollWidth:&#39;+this.scrollWidth+&#39;\n clientWidth:&#39;+this.clientWidth);">
</textarea>  
</body>  
</html>

Masukkan kandungan dalam kotak teks Apabila bar skrol mendatar tidak muncul, nilai scrollWidth dan clientWidth adalah yang sama. Apabila baris kandungan melebihi lebar kotak teks, bar skrol mendatar muncul dan nilai scrollWidth berubah.
scrollWidth ialah lebar kandungan sebenar objek.
clientWidth ialah lebar yang dilihat oleh objek (tidak termasuk tepi), yang tidak akan berubah dalam contoh ini.

Contoh clientWidth dan offsetWidth:

<html>  
<head>  
<title>77.htm文件</title>  
</head>  
<body>  
<textarea wrap="off" onfocus="alert(&#39;offsetWidth:&#39;+this.offsetWidth+&#39;\n clientWidth:&#39;+this.clientWidth);">
</textarea>  
</body>  
</html>

Nilai offsetWidth sentiasa lebih besar daripada nilai clientWidth.
clientWidth ialah lebar yang dilihat oleh objek (tidak termasuk tepi)
offsetWidth ialah lebar yang dilihat oleh objek (termasuk tepi, seperti lebar yang diduduki oleh bar skrol)

The di atas ialah scrollWidth, Perbezaan antara kandungan pertukaran clientWidth dan offsetWidth_Experience, sila perhatikan laman web PHP Cina (www.php.cn) untuk kandungan yang lebih berkaitan!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Beberapa perkara yang terlintas dalam fikiran apabila menyelesaikan masalah pertukaran ul centering_ExperienceArtikel seterusnya：Beberapa perkara yang terlintas dalam fikiran apabila menyelesaikan masalah pertukaran ul centering_Experience

Artikel berkaitan

Lihat lagi