Der Unterschied zwischen den JavaScript-Fähigkeiten scrollWidth, clientWidth und offsetWidth_javascript

Testen Sie den Unterschied zwischen diesen drei Attributen anhand einer Demo.

Beschreibung:

scrollWidth: Die Breite des tatsächlichen Inhalts des Objekts, mit Ausnahme der Kantenbreite, erhöht sich, wenn der Inhalt im Objekt den sichtbaren Bereich überschreitet.
clientWidth: Die Breite des visuellen Bereichs des Objektinhalts, mit Ausnahme von Bildlaufleisten und anderen Kanten, ändert sich, wenn sich die Anzeigegröße des Objekts ändert.
offsetWidth: Die tatsächliche Breite des gesamten Objekts, einschließlich Bildlaufleisten und anderer Kanten, ändert sich, wenn sich die Anzeigegröße des Objekts ändert.

Diese Demo platziert ein Textbereichselement auf der Seite und zeigt es mit der Standardbreite und -höhe an.

Fall 1:

Das Element enthält keinen Inhalt oder der Inhalt überschreitet nicht den sichtbaren Bereich und das Scrollen wird nicht angezeigt oder ist nicht verfügbar.

scrollWidth=clientWidth, beides ist die Breite des sichtbaren Inhaltsbereichs.

offsetWidth ist die tatsächliche Breite des Elements.

Fall 2:

Wenn der Inhalt des

-Elements den visuellen Bereich überschreitet, wird die Bildlaufleiste angezeigt und ist verfügbar.

scrollWidth>clientWidth.

scrollWidth ist die Breite des tatsächlichen Inhalts.

clientWidth ist die Breite des sichtbaren Inhaltsbereichs.

offsetWidth ist die tatsächliche Breite des Elements.

ENDE

Das Obige ist der Unterschied zwischen scrollWidth, clientWidth und offsetWidth. Ich hoffe, dass es für alle hilfreich ist.