Der Unterschied zwischen clientWidth, offsetWidth, scrollWidth in JavaScript

Der Unterschied zwischen clientWidth, offsetWidth, scrollWidth in JavaScript

1. Konzept

Sie alle sind Attribute des Elements und geben die Breite des Elements an:

Element.clientWidth Inhalt + innerer Rand - Bildlaufleiste ----- ohne Rahmen und äußere Ränder == sichtbarer Inhalt
Element.scrollWidth-Inhalt + Polsterung + Überlaufgröße ----- ohne Ränder und Ränder == tatsächlicher Inhalt
Element.offsetWidth Die Breite des Elements (Inhalt + Polsterung + Rahmen + Bildlaufleiste) == das gesamte Steuerelement

2. Beispiele

1. Nur horizontale Bildlaufleiste

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Testen Sie Scrollbreite, Clientbreite, Offsetbreite</title>
 <style type="text/css">
  Text, HTML {
   Rand: 0px;
   Polsterung: 0px;
  }

  #Vater {
   Breite: 300px;
   Überlauf: automatisch;
   Polsterung: 10px;
   Hintergrund: Rebeccapurple;
   Rand: 10px durchgehend rot;
   Rand: 20px;
  }

  #Kind {
   Höhe: 100px;
   Breite: 1000px;
   Polsterung: 10px;
   Rand: 20px durchgezogen #ffcc99;
   Rand: 30px;
  }
 </Stil>
</Kopf>
<Text>

<div id="Vater">
 <div id="Kind"></div>
</div>

<Skripttyp="text/javascript">
 var Kind = document.getElementById("Kind");
 console.log("child.width:", window.getComputedStyle(child).width); //Inhaltsbreite: 1000px
 console.log("child.clientWidth:", child.clientWidth); //Inhalt + innerer Rand - Bildlaufleiste-----ohne Rahmen und äußere Ränder == sichtbarer Inhalt 1020px
 console.log("child.scrollWidth:", child.scrollWidth); //Inhalt + Polsterung + Überlaufgröße ----- ohne Ränder und Ränder == tatsächlicher Inhalt 1020px
 console.log("child.offsetWidth:", child.offsetWidth); //Die Breite des Elements (Inhalt + Polsterung + Rahmen + Bildlaufleiste) == das Ganze, das gesamte Steuerelement ist 1060px groß

 var Vater = document.getElementById("Vater");
 console.log("father.width:", window.getComputedStyle(father).width); //Inhaltsbreite: 300px
 console.log("father.clientWidth:", father.clientWidth); //Inhalt + innerer Rand - Bildlaufleiste ----- ohne Rahmen und äußere Ränder == sichtbarer Inhalt 320px
 console.log("father.scrollWidth:", father.scrollWidth); //Inhalt + Polsterung + Überlaufgröße ----- ohne Ränder und Ränder == tatsächlicher Inhalt 1100px
 console.log("father.offsetWidth:", father.offsetWidth); //Die Breite des Elements (Inhalt + Polsterung + Rahmen + Bildlaufleiste) == das Ganze, das gesamte Steuerelement ist 340px groß
</Skript>
</body>
</html>

Wenn nur eine horizontale Bildlaufleiste vorhanden ist, wird das übergeordnete Element von der Breite des untergeordneten Elements beeinflusst. Die andere spezielle Funktion ist scrollWidth.

Die Bildlaufbreite des übergeordneten Elements beträgt: Inhalt des untergeordneten Elements + Polsterung + Rahmen + Rand auf einer Seite des untergeordneten Elements + Polsterung auf einer Seite des übergeordneten Elements.

2. Es gibt horizontale und vertikale Bildlaufleisten

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <title>Testen Sie Scrollbreite, Clientbreite, Offsetbreite</title>
 <style type="text/css">
  Text, HTML {
   Rand: 0px;
   Polsterung: 0px;
  }

  #Vater {
   Höhe: 50px;
   Breite: 300px;
   Überlauf: automatisch;
   Polsterung: 10px;
   Hintergrund: Rebeccapurple;
   Rand: 10px durchgehend rot;
   Rand: 20px;
  }

  #Kind {
   Höhe: 100px;
   Breite: 1000px;
   Polsterung: 10px;
   Rand: 20px durchgezogen #ffcc99;
   Rand: 30px;
  }
 </Stil>
</Kopf>
<Text>

<div id="Vater">
 <div id="Kind"></div>
</div>

<Skripttyp="text/javascript">
 var Kind = document.getElementById("Kind");
 console.log("child.width:", window.getComputedStyle(child).width); //Inhaltsbreite: 1000px
 console.log("child.clientWidth:", child.clientWidth); //Inhalt + innerer Rand - Bildlaufleiste-----ohne Rahmen und äußere Ränder == sichtbarer Inhalt 1020px
 console.log("child.scrollWidth:", child.scrollWidth); //Inhalt + Polsterung + Überlaufgröße ----- ohne Ränder und Ränder == tatsächlicher Inhalt 1020px
 console.log("child.offsetWidth:", child.offsetWidth); //Die Breite des Elements (Inhalt + Polsterung + Rahmen + Bildlaufleiste) == das Ganze, das gesamte Steuerelement ist 1060px groß

 var Vater = document.getElementById("Vater");
 console.log("father.width:", window.getComputedStyle(father).width); //Inhaltsbreite: 285px
 console.log("father.clientWidth:", father.clientWidth); //Inhalt + innerer Rand - Bildlaufleiste ----- ohne Rahmen und äußere Ränder == sichtbarer Inhalt 305px
 console.log("father.scrollWidth:", father.scrollWidth); //Inhalt + Polsterung + Überlaufgröße ----- ohne Ränder und Ränder == tatsächlicher Inhalt 1100px
 console.log("father.offsetWidth:", father.offsetWidth); //Die Breite des Elements (Inhalt + Polsterung + Rahmen + Bildlaufleiste) == das Ganze, das gesamte Steuerelement ist 340px groß
</Skript>
</body>
</html>

Die Breite des übergeordneten Elements beträgt: die Inhaltsbreite des übergeordneten Elements – die Breite der Bildlaufleiste (ungefähr 15 Pixel)

Die Clientbreite des übergeordneten Elements ist: die Inhaltsbreite des übergeordneten Elements + die Polsterbreite des übergeordneten Elements - die Breite der Bildlaufleiste (ungefähr 15 Pixel)

Oben finden Sie detaillierte Informationen zum Unterschied zwischen clientWidth, offsetWidth und scrollWidth in Element. Weitere Informationen zum Unterschied zwischen clientWidth, offsetWidth und scrollWidth finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • offsetWidth, clientWidth, innerWidth und verwandte Attributmethoden in Javascript
  • Der Unterschied zwischen scrollWidth, clientWidth, offsetWidth
  • Javascript scrollLeft,scrollWidth,clientWidth,offsetWidth vollständige Erklärung
  • Der Unterschied zwischen scrollWidth, clientWidth und offsetWidth
  • HTML: scrollLeft, scrollWidth, clientWidth, offsetWidth vollständig erklärt
  • Was ist der Unterschied zwischen this.clientWidth und this.offsetWidth
  • Einige Informationen zu ClientWidth

<<:  CentOS 7-Konfiguration Tomcat9+MySQL-Lösung

>>:  Einfache Beispiele zum Erstellen gespeicherter Prozeduren, Trigger und zur Verwendung von Cursorn in Navicat (Bilder und Text)

Artikel empfehlen

Verwaltung von xinetd-basierten Diensten, die mit RPM-Paketen in Linux installiert wurden

Inhaltsverzeichnis Vorwort 1. Startup-Management ...

Aufrufen von Baidu Map zum Abrufen von Längen- und Breitengrad in Vue

Im Projekt ist es erforderlich, den Breiten- und ...

Erfahrungsaustausch durch einen Frontend-Supervisor mit 7 Jahren Praxiserfahrung

Heute teile ich die wertvollen Erfahrungen eines ...

Schwebendes Menü, kann einen Bildlaufeffekt nach oben und unten erzielen

Der Code kann noch weiter optimiert werden. Aus Z...

Beheben Sie den abnormalen Fehler beim Erstellen einer Vue-Umgebung mit Webpack

Inhaltsverzeichnis Konfigurieren Sie zuerst packa...

Häufige Verwendung von Hooks in React

Inhaltsverzeichnis 1. Was ist ein Hook? 2. Warum ...

Ausführliche Erläuterung der Standortpriorität von Nginx

Standortausdruckstyp ~ bedeutet, dass ein regulär...

Lösung für das Problem, dass der Rahmenstil des Tags <td></td> im Browser nicht angezeigt werden kann

Frage: In einigen Browsern, wie zum Beispiel im K...

So ändern Sie in Nginx die über http aufgerufene Website in https

Inhaltsverzeichnis 1. Hintergrund 2. Voraussetzun...

Schritte zum Erstellen eines Vite-Projekts

Inhaltsverzeichnis Vorwort Was macht Yarn Create?...

Verwendung von Umgebungsvariablen in Docker und Lösungen für häufige Probleme

Vorwort Docker kann Umgebungsvariablen für Contai...

Detaillierte Erklärung zur Verwendung von MySQL-Gruppenlinks

Gruppieren und Verknüpfen sind in MySQL die beide...

Eine kurze Analyse der Probleme mit JS-Originalwerten und Referenzwerten

Primitive Werte -> primitive Typen Number Stri...

Interpretation der Vue-Komponentenregistrierungsmethode

Inhaltsverzeichnis Überblick 1. Globale Registrie...

So implementieren Sie die Seiten-Screenshot-Funktion in JS

„Seiten-Screenshot“ ist eine Anforderung, die häu...