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

So vergessen Sie das Root-Passwort in Mysql8.0.13 unter Windows 10

1. Stoppen Sie zuerst den MySQL-Dienst Öffnen Sie...

So gehen Sie nach der MySQL-Tabellenpartitionierung problemlos online

Inhaltsverzeichnis Zweck der Tabelle Zum Beispiel...

Lösung für Docker-Container, der Schriftarten wie Songti nicht erkennt

Problemhintergrund: Wenn Sie Docker zum Bereitste...

Erfahren Sie, wie Sie den Zabbix-Dienst auf Saltstack bereitstellen

Inhaltsverzeichnis Saltstack stellt Zabbix-Dienst...

Hinweise zum Import, Export und zur Migration von MySQL Billions of Data

Ich habe in letzter Zeit viele MySQL-Notizen gema...

CSS imitiert den sanften Umschalttasteneffekt von Apple

Inhaltsverzeichnis 1. Code-Analyse 2. Quellcode Q...

Erweiterte Verwendung von Ansichten, Transaktionen, Indizes, Selbstverbindungen und Benutzerverwaltung in der MySQL-Datenbank – Beispielanalyse

Dieser Artikel beschreibt anhand von Beispielen d...

Verständnis von Haslaylout- und BFC-Parsing

1. haslayout und bfc sind IE-spezifische und Stand...

CocosCreator implementiert Skill-Kühleffekt

CocosCreator realisiert Skill-CD-Effekt In vielen...

Der Unterschied zwischen Schlüssel und Index in MySQL

Schauen wir uns zunächst den Code an: ALTER TABLE...

Keepalived implementiert Nginx-Lastausgleich und Beispielcode für hohe Verfügbarkeit

Kapitel 1: Einführung in Keepalived Der Zweck des...

Einführung des Code-Prüftools stylelint zum Erfahrungsaustausch

Inhaltsverzeichnis Vorwort Text 1. Installieren S...

Perfekte Lösung für das Problem des CSS-Hintergrundbildpfads im Webpack

Innerhalb des Style-Tags der Vue-Komponente befin...

Vue realisiert den Prozentbalkeneffekt

In diesem Artikel wird der spezifische Code von V...

Beispiel für die Verwendung von rem zum Ersetzen von px in einem Vue-Projekt

Inhaltsverzeichnis Werkzeug Installieren Sie das ...