CSS verwendet OffsetWidth, clientWidth, scrollWidth und Height-CSS-Tutorial-php.cn

CSS 中的 OffsetWidth、clientWidth、scrollWidth 和 Height

Die erste Frage, die mir nach dem Lesen des Titels dieses Tutorials in den Sinn kommt, ist, dass offsetWidth, clientWidth und scrollWidth die Breite von HTML zurückgeben, aber was ist der Unterschied zwischen ihnen?

Der Unterschied zwischen ihnen besteht darin, wie viel Platz sie auf der Webseite einnehmen. In diesem Tutorial lernen wir die unterschiedlichen Breiten und Höhen von HTML-Elementen kennen.

Offset-Breite, Client-Breite, Scroll-Breite

offsetWidth – Dies ist die Gesamtbreite des Elements, einschließlich tatsächlicher Breite, Abstand, Rahmen und Bildlaufleisten in Pixel. Es enthält keine Ränder in der Breite. Es ist die äußere Breite des HTML-Elements.
clientWidth – Gibt die tatsächliche Breite + Polsterung des Elements zurück. Es umfasst keine Ränder, Rahmen oder die Breite der Bildlaufleiste. Dies ist die interne Breite des HTML-Elements.
scrollWidth – Gibt die Gesamtbreite des scrollbaren Inhalts zurück, einschließlich Innenabstand, aber ohne Ränder, Ränder, Bildlaufleisten usw.

Grammatik

Benutzer können die Eigenschaften is offsetWidth, clientWidth und scrollWidth in JavaScript gemäß der folgenden Syntax verwenden.

element.scrollWidth;
element.clientWidth;
element.scrollWidth;

Nach dem Login kopieren

In der obigen Syntax ist das Element ein HTML-Element und wir müssen seine Breite ermitteln.

Beispiel 1

Im folgenden Beispiel haben wir ein div-Element erstellt und Textinhalt hinzugefügt. Darüber hinaus haben wir eine feste Breite für das div-Element festgelegt und CSS angewendet, um es horizontal scrollbar zu machen.

In JavaScript greifen wir auf die div-Elemente zu und verwenden die Eigenschaften offsetWidth, clientWidth und scrollWidth, um die jeweiligen Breiten zu erhalten. In der Ausgabe kann der Benutzer beobachten, dass die OffsetWidth 330 Pixel beträgt (300 Pixel tatsächliche Breite + 10 Pixel linker Abstand + 10 Pixel rechter Abstand + 5 Pixel linker Rand + 5 Pixel rechter Rand). clientWidth ist gleich 320 px, da nur die tatsächliche Breite und der Abstand gezählt werden, nicht die Ränder. scrollWidth beträgt 1549 px und misst die Breite des scrollbaren Inhalts.

<html>
<head>
   <style>
      .element {
         width: 300px;
         padding: 10px;
         border: 5px solid blue;
         font-size: 2rem;
         color: green;
         overflow-x: auto;
         overflow-y: hidden;
         white-space: nowrap;
      }
   </style>
</head>
<body>
   <h3> Using the <i> offsetWidth, clientWidth, scrollWidth </i> CSS properties to get different widths of an HTML element. </h3>
   <div class = "element">
      <p class="text"> Hello Users! The width of this div element is 300px. The left and right padding is 10px. The left and right border is 5px.</p>
   </div>
   <div id = "output"> </div>
   <script>
      var element = document.querySelector('.element');
      var output = document.querySelector('#output');
      output.innerHTML = "offsetWidth: " + element.offsetWidth + "<br>" +
      "clientWidth: " + element.clientWidth + "<br>" +
      "scrollWidth: " + element.scrollWidth;
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

Im folgenden Beispiel fügen wir Textinhalte zu einem div-Element hinzu und machen es horizontal scrollbar, genau wie im ersten Beispiel. Darüber hinaus haben wir Eingabefelder erstellt, um die Breite, den Abstand und die Rahmenbreite des Benutzers zu ermitteln.

In JavaScript greifen wir auf den Eingabewert zu und formatieren das HTML-Element basierend auf diesem Wert.

In der Ausgabe kann der Benutzer den Eingabewert eingeben und auf die Schaltfläche „Breite abrufen“ klicken, um die Breite des Elements neu zu berechnen.

<html>
<head>
   <style>
      .element {
         width: 300px;
         padding: 10px;
         border: 5px solid red;
         font-size: 2rem;
         color: pink;
         overflow-x: auto;
         overflow-y: hidden;
         white-space: nowrap;
      }
   </style>
</head>
<body>
   <h3> Using the <i> offsetWidth, clientWidth, scrollWidth </i> CSSproperties to get differnt widths of an HTML element </h3>
   <div class = "element">
      PHP is a popular server-side scripting language that is widely used to build dynamic websites and web applications. One of the key strengths of PHP is its ability to interact with databases, making it an ideal language for building content management systems, e-commerce websites, and other database-driven applications.
   </div> <br>
   <div>
      <label for = "width"> Width: </label> <input type = "number" id = "width" value = "300">
      <label for = "padding"> Padding: </label> <input type = "number" id = "padding" value = "10">
      <label for = "border"> Border: </label> <input type = "number" id = "border" value = "5">
   </div>  <br> <br>
   <div id = "output"> </div> <br> <br>
   <button onclick = "getWidths()"> Get widths </button>
   <script>
      var element = document.querySelector('.element');
      var output = document.querySelector('#output');
      function getWidths() {
         var width = document.querySelector('#width').value;
         var padding = document.querySelector('#padding').value;
         var border = document.querySelector('#border').value;
         element.style.width = width + "px";
         element.style.padding = padding + "px";
         element.style.border = border + "px solid red";
         output.innerHTML = "offsetWidth: " + element.offsetWidth + "<br>" +
         "clientWidth: " + element.clientWidth + "<br>" +
         "scrollWidth: " + element.scrollWidth;
      }
      getWidths();
   </script>
</body>
</html>

Nach dem Login kopieren

Offset-Höhe, Client-Höhe, Scroll-Höhe

Die Eigenschaften offsetHeight, clientHeight und scrollHeight ähneln offsetWidth, clientWidth und scrollWidth.

offsetHeight – Gibt die Gesamthöhe des Elements zurück, einschließlich tatsächlicher Höhe, Polsterung und Rändern. Es ist die äußere Höhe des Elements
clientHeight – Es wird lediglich die Summe aus tatsächlicher Höhe und Polsterung zurückgegeben. Dies ist eine Innenhöhe.
scrollHeight – Gibt die Höhe des scrollbaren Inhalts einschließlich Innenabstand zurück.

Grammatik

Benutzer können die JavaScript-Eigenschaften offsetHeight, clientHeight und scrollHeight gemäß der folgenden Syntax verwenden.

element.scrollHeight;
element.clientHeight;
element.scrollHeight;

Nach dem Login kopieren

Beispiel 3

Im folgenden Beispiel haben wir Inhalt zu einem div-Element hinzugefügt und Overflow-y so eingestellt, dass es vertikal scrollt. In JavaScript verwenden wir die Eigenschaften offsetHeight, clientHeight und scrollHeight, um die unterschiedlichen Höhen von HTML-Elementen zu ermitteln.

In der Ausgabe beträgt offsetHeight 130 px, was 100 px tatsächlicher Höhe + 10 px oberer Polsterung + 10 px unterer Polsterung + 5 px oberem Rand + 5 px unterem Rand entspricht. Die Clienthöhe beträgt 120 Pixel, was der Summe aus tatsächlicher Breite und Innenabstand entspricht. Die Scrollhöhe beträgt 343 Pixel, was der Höhe des scrollbaren Inhalts entspricht.

<html>
<head>
   <style>
      .element {
         height: 100px;
         width: 300px;
         padding: 10px;
         border: 5px solid blue;
         font-size: 2rem;
         color: green;
         overflow-x: hidden;
         overflow-y: auto;
      }
   </style>
</head>
<body>
   <h3> Using the <i> offsetHeight, clientHeight, scrollHeight </i> CSS properties to get different Heights of an HTML element. </h3>
   <div class = "element">
      <p class = "text"> Hello Users! The Height of this div element is 300px. The left and right padding is 10px. The left and right border is 5px. </p>
   </div> <br> <br>
   <div id = "output"> </div>
   <script>
      var element = document.querySelector('.element');
      var output = document.querySelector('#output');
      output.innerHTML = "offsetHeight: " + element.offsetHeight + "<br>" +
      "clientHeight: " + element.clientHeight + "<br>" +
      "scrollHeight: " + element.scrollHeight;
   </script>
</body>
</html>

Nach dem Login kopieren

In diesem Tutorial haben wir gelernt, wie man die Breite eines HTML-Elements mithilfe der Eigenschaften offsetWidth, clientWidth und scrollWidth ermittelt. Darüber hinaus haben wir den Unterschied zwischen den Eigenschaften offsetHeight, clientHeight und scrollHeight kennengelernt, die unterschiedliche Höhen von HTML-Elementen zurückgeben.

Das obige ist der detaillierte Inhalt vonCSS verwendet OffsetWidth, clientWidth, scrollWidth und Height. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!