Der Unterschied zwischen scrollWidth, clientWidth und offsetWidth

Heim

Web-Frontend

CSS-Tutorial

Der Unterschied zwischen scrollWidth, clientWidth und offsetWidth_Experience-Austausch

PHP中文网

May 16, 2016 pm 12:07 PM

offsetwidth

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(&#39;scrollWidth:&#39;+this.scrollWidth+&#39;\n clientWidth:&#39;+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(&#39;offsetWidth:&#39;+this.offsetWidth+&#39;\n clientWidth:&#39;+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!

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

So viele FarblinksApr 13, 2025 am 11:36 AM

Es gab in letzter Zeit eine Reihe von Werkzeugen, Artikeln und Ressourcen über Farbe. Bitte erlauben Sie mir, ein paar Registerkarten zu schließen, indem Sie sie hier für Ihren Vergnügen zusammenrunden.

Wie automatische Margen in Flexbox funktionierenApr 13, 2025 am 11:35 AM

Robin hat dies schon einmal abgedeckt, aber ich habe in den letzten Wochen einige Verwirrung darüber gehört und gesehen, wie eine andere Person einen Stich gemacht hat, um es zu erklären, und ich wollte

Bewegliche Regenbogen unterstreichtApr 13, 2025 am 11:27 AM

Ich liebe das Design der Sandwich -Site. Unter vielen schönen Merkmalen befinden sich diese Schlagzeilen mit Regenbogenuntergründen, die sich beim Scrollen bewegen. Es ist nicht

Neues Jahr, neuer Job? Lassen Sie einen netzbetriebenen Lebenslauf machen!Apr 13, 2025 am 11:26 AM

Viele beliebte Lebenslaufdesigns machen den verfügbaren Seitenraum optimal, indem sie Abschnitte in Gitterform legen. Verwenden wir ein CSS -Netz, um ein Layout zu erstellen, das

Eine Möglichkeit, die Benutzer aus der Gewohnheit herauszubrechen, zu viel neu zu ladenApr 13, 2025 am 11:25 AM

Seiten -Nachladen sind eine Sache. Manchmal aktualisieren wir eine Seite, wenn wir der Meinung sind, dass sie nicht mehr reagiert, oder glauben, dass neue Inhalte verfügbar sind. Manchmal sind wir nur sauer auf

Domänengetriebenes Design mit ReactApr 13, 2025 am 11:22 AM

Es gibt nur sehr wenige Anleitungen zur Organisation von Front-End-Anwendungen in der Welt der Reaktionen. (Bewegen Sie einfach Dateien um, bis es sich „richtig anfühlt“, lol). Die Wahrheit

Erkennen inaktiver BenutzerApr 13, 2025 am 11:08 AM

Meistens kümmert es Sie sich nicht wirklich darum, ob ein Benutzer aktiv mit Ihrer Anwendung inaktiv oder vorübergehend inaktiv ist. Inaktiv, was vielleicht sie vielleicht