Der Unterschied zwischen clientWidth, offsetWidth, scrollWidth in JavaScript
1. KonzeptSie 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 2. Beispiele1. 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:
|
<<: CentOS 7-Konfiguration Tomcat9+MySQL-Lösung
Artikel empfehlen
So ändern Sie schnell das Root-Passwort unter CentOS8
Starten Sie die virtuelle Centos8-Maschine und dr...
Das Docker-Intranet erstellt DNS und verwendet den Domänennamenzugriff anstelle des IP:Port-Vorgangs.
Wenn ich beispielsweise einen Jenkins-Server in m...
Informationen zur Verwendung der Vue v-on-Direktive
Inhaltsverzeichnis 1. Auf Ereignisse achten 2. Üb...
Zusammenfassung der Unterschiede zwischen count(*), count(1) und count(col) in MySQL
Vorwort Mit der Funktion count werden die Datensä...
Weitere beliebte und kreative Beispiele für Webdesign mit dunklem Hintergrund
Seitendesigns im dunklen Hintergrundstil sind seh...
Lösung für die Willkommensmeldung im Notfallmodus beim Booten von CentOS7.4
Heute habe ich eine virtuelle Maschine für ein Ex...
So verwenden Sie gespeicherte Prozeduren in MySQL, um schnell 1 Million Datensätze zu generieren
Vorwort Um beim Testen die Fähigkeit des Projekts...
Detaillierte Erklärung des Fehlers bei der Verwendung des Element-ui NavMenu-Untermenüs zur rekursiven Generierung
Wenn das Untermenü der Navigationsleiste rekursiv...
Lösen Sie das Problem der Verwendung von weniger in Vue
1. Installieren Sie weniger Abhängigkeiten: npm i...
Implementierungsschritte zur Installation eines Redis-Containers in Docker
Inhaltsverzeichnis Redis auf Docker installieren ...
So mounten Sie die CD, um das RPM-Paket unter Linux zu finden
Vorne geschrieben Manchmal müssen Sie bei der Ver...
js verwendet Canvas, um mehrere Bilder in einem Implementierungscode zusammenzuführen
Lösung Funktion mergeImgs(Liste) { const imgDom =...
Detaillierte Analyse des MySQL 8.0-Redo-Logs
Inhaltsverzeichnis Vorwort Generierung eines Redo...
Div kann Inhalte eingeben, ohne die Eingabe als Eingabefeld zu verwenden, um den automatischen Eingabestil zu blockieren
Heute habe ich einen dynamischen Fensterstil für d...
CSS realisiert die Realisierung der Hintergrundbild-Bildschirmanpassung
Beim Erstellen einer Homepage, beispielsweise ein...