Maison > Article > interface Web > CSS utilise OffsetWidth, clientWidth, scrollWidth et Height

CSS utilise OffsetWidth, clientWidth, scrollWidth et Height

王林avant: 2023-08-25 20:09:121630parcourir

CSS 中的 OffsetWidth、clientWidth、scrollWidth 和 Height

La première question qui me vient à l'esprit après avoir lu le titre de ce tutoriel est que offsetWidth, clientWidth et scrollWidth renvoient la largeur du HTML, mais quelle est la différence entre eux ?

La différence entre eux réside dans la quantité d'espace qu'ils occupent sur la page Web. Dans ce tutoriel, nous découvrirons les différentes largeurs et différentes hauteurs des éléments HTML.

Largeur de décalage, largeur client, largeur de défilement

offsetWidth - Il s'agit de la largeur totale de l'élément, y compris la largeur réelle, le remplissage, les bordures et les barres de défilement en pixels. Il n'inclut pas les marges en largeur. C'est la largeur extérieure de l'élément HTML.
clientWidth - Il renvoie la largeur réelle + le remplissage de l'élément. Il n'inclut pas les marges, les bordures ou la largeur de la barre de défilement. C'est la largeur interne de l'élément HTML.
scrollWidth - Il renvoie la largeur totale du contenu défilable, y compris le remplissage, mais à l'exclusion des bordures, des marges, des barres de défilement, etc.

Grammaire

Les utilisateurs peuvent utiliser les propriétés is offsetWidth, clientWidth et scrollWidth en JavaScript selon la syntaxe suivante.

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

Dans la syntaxe ci-dessus, l'élément est un élément HTML et nous devons trouver sa largeur.

Exemple 1

Nous avons créé un élément div et ajouté du contenu textuel dans l'exemple ci-dessous. De plus, nous avons défini une largeur fixe pour l'élément div et appliqué CSS pour le rendre défilant horizontalement.

En JavaScript, nous accédons aux éléments div et utilisons les propriétés offsetWidth, clientWidth et scrollWidth pour obtenir les largeurs respectives. Dans la sortie, l'utilisateur peut observer que offsetWidth est égal à 330 pixels (300 px de largeur réelle + 10 px de remplissage gauche + 10 px de remplissage droit + 5 px de bordure gauche + 5 px de bordure droite). clientWidth est égal à 320 px car il ne compte que la largeur et le remplissage réels, pas les bordures. scrollWidth est de 1 549 px, mesurant la largeur du contenu défilant.

<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>

Exemple 2

Dans l'exemple ci-dessous, nous ajoutons du contenu textuel à un élément div et le rendons défilable horizontalement, tout comme le premier exemple. De plus, nous avons créé des champs de saisie pour obtenir la largeur, le remplissage et la largeur de la bordure de l'utilisateur.

En JavaScript, nous accédons à la valeur d'entrée et stylisons l'élément HTML en fonction de cette valeur.

Dans la sortie, l'utilisateur peut saisir la valeur d'entrée et cliquer sur le bouton "Obtenir la largeur" pour recalculer la largeur de l'élément.

<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>

Hauteur de décalage, hauteur du client, hauteur de défilement

Les propriétés offsetHeight, clientHeight et scrollHeight sont similaires à offsetWidth, clientWidth et scrollWidth.

offsetHeight - Il renvoie la hauteur totale de l'élément, y compris la hauteur réelle, le remplissage et les bordures. C'est la hauteur extérieure de l'élément
clientHeight - Il renvoie simplement la somme de la hauteur réelle et du rembourrage. Il s'agit d'une hauteur interne.
scrollHeight - Il renvoie la hauteur du contenu défilant, y compris le remplissage.

Grammaire

Les utilisateurs peuvent utiliser les propriétés JavaScript offsetHeight, clientHeight et scrollHeight selon la syntaxe suivante.

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

Exemple 3

Dans l'exemple ci-dessous, nous avons ajouté du contenu à un élément div et configuré Overflow-y pour qu'il défile verticalement. En JavaScript, nous utilisons les propriétés offsetHeight, clientHeight et scrollHeight pour obtenir les différentes hauteurs des éléments HTML.

Dans la sortie, le offsetHeight est de 130 px, ce qui est égal à 100 px de hauteur réelle + 10 px de remplissage supérieur + 10 px de remplissage inférieur + 5 px de bordure supérieure + 5 px de bordure inférieure. La hauteur du client est de 120 px, ce qui correspond à la somme de la largeur réelle et du remplissage. La hauteur de défilement est de 343 pixels, ce qui est égal à la hauteur du contenu défilable.

<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>

Dans ce tutoriel, nous avons appris comment obtenir la largeur d'un élément HTML à l'aide des propriétés offsetWidth, clientWidth et scrollWidth. De plus, nous avons appris la différence entre les propriétés offsetHeight, clientHeight et scrollHeight qui renvoient différentes hauteurs d'éléments HTML.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment créer un compteur de sections en utilisant HTML et CSS ?Article suivant：Comment créer un compteur de sections en utilisant HTML et CSS ?

Articles Liés

Voir plus