Heim >Web-Frontend >CSS-Tutorial >Der Unterschied zwischen scrollWidth, clientWidth und offsetWidth_Experience-Austausch
Der Unterschied zwischen scrollWidth, clientWidth und offsetWidth_Experience Exchange
scrollWidth
ist die Breite des tatsächlichen Inhalts des Objekts, mit Ausnahme der Kantenbreite, und ändert sich mit dem Inhalt des Objekts (mehr Inhalt kann die tatsächliche Breite des Objekts verändern).
clientWidth
ist die sichtbare Breite des Objekts, ausgenommen Bildlaufleisten und andere Kanten, und ändert sich mit der Anzeigegröße des Fensters.
offsetWidth
ist die sichtbare Breite des Objekts, einschließlich Bildlaufleisten und anderer Kanten, die sich mit der Anzeigegröße des Fensters ändert.
Ein Beispiel für scrollWidth und clientWidth:
<html> <head> <title>77.htm文件</title> </head> <body> <textarea wrap="off" onfocus="alert('scrollWidth:'+this.scrollWidth+'\n clientWidth:'+this.clientWidth);"> </textarea> </body> </html>
Geben Sie den Inhalt in das Textfeld ein, wenn die horizontale Bildlaufleiste nicht angezeigt wird das gleiche. Wenn eine Inhaltszeile die Breite des Textfelds überschreitet, wird eine horizontale Bildlaufleiste angezeigt und der Wert von scrollWidth ändert sich.
scrollWidth ist die Breite des tatsächlichen Inhalts des Objekts.
clientWidth ist die Breite, die das Objekt sieht (ohne Kanten), die sich in diesem Beispiel nicht ändert.
Ein Beispiel für clientWidth und offsetWidth:
<html> <head> <title>77.htm文件</title> </head> <body> <textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);"> </textarea> </body> </html>
Der Wert von offsetWidth ist immer größer als der Wert von clientWidth.
clientWidth ist die vom Objekt gesehene Breite (ohne Kanten)
offsetWidth ist die vom Objekt gesehene Breite (einschließlich Kanten, z. B. die von der Bildlaufleiste eingenommene Breite)
Die Oben ist scrollWidth, Der Unterschied zwischen clientWidth und offsetWidth_Experience Austauschinhalte, bitte beachten Sie die chinesische PHP-Website (www.php.cn) für weitere verwandte Inhalte!