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

Vue implementiert einen einfachen Rechner

In diesem Artikelbeispiel wird der spezifische Co...

Über die richtige Art und Weise der Zeitumrechnung in JS beim Excel-Import

Inhaltsverzeichnis 1. Grundlagen 2. Problembeschr...

So optimieren Sie MySQL-Indizes

1. Wie MySQL Indizes verwendet Indizes werden ver...

Das adaptive CSS-Layout realisiert die Gesamtzentrierung von Unterelementelementen und die Linksausrichtung von internen Elementen

Bei der täglichen Arbeit stoßen wir möglicherweis...

Das WeChat-Applet realisiert eine Links-Rechts-Verknüpfung

In diesem Artikel wird der spezifische Code für d...

Docker-Protokolle - Zeigen Sie die Implementierung der Docker-Container-Protokolle an

Sie können die Containerprotokolle über den Befeh...

Beispiel für die Verwendung von Docker Swarm zum Erstellen eines verteilten Crawler-Clusters

Während des Crawler-Entwicklungsprozesses sind Si...

HTML-Sonderzeichen-Konvertierungstabelle

Charakter Dezimal Zeichennummer Entitätsname --- ...

So verwenden Sie Echarts zum Visualisieren von Komponenten in Vue

Offizielle Website-Adresse der Echarts-Komponente...

JavaScript implementiert einfaches Scrollfenster

In diesem Artikelbeispiel wird der spezifische Ja...

Lösen Sie schnell das Problem, dass der mysql57-Dienst plötzlich verschwunden ist

eins, G:\MySQL\MySQL Server 5.7\bin> mysqld --...

JavaScript-Entwurfsmuster, Proxy-Muster lernen

Inhaltsverzeichnis Überblick Durchführung Schutz-...

Scrollen Sie in Vue nach unten, um weitere Daten zu laden. Detaillierte Erläuterung des Scroll-Falls

Vue-unendliches Scrollen Installieren npm install...

Beherrschen Sie die häufig verwendeten HTML-Tags zum Zitieren von Inhalten auf Webseiten.

Verwenden Sie „blockquote“ für lange Zitate, „q“ ...

Detaillierte Schritte zur Installation der MySQL 5.6 X64-Version unter Linux

Umfeld: 1. CentOS6.5 X64 2.mysql-5.6.34-linux-gli...