CSS 中的 OffsetWidth、clientWidth、scrollWidth 和 Tinggi-tutorial css-php.cn

CSS 中的 OffsetWidth、clientWidth、scrollWidth 和 Height

Persoalan pertama yang terlintas di fikiran selepas membaca tajuk tutorial ini ialah offsetWidth, clientWidth dan scrollWidth mengembalikan lebar HTML, tetapi apakah perbezaan antara mereka?

Perbezaan antara mereka ialah jumlah ruang yang mereka gunakan pada halaman web. Dalam tutorial ini, kita akan belajar tentang lebar yang berbeza dan ketinggian elemen HTML yang berbeza.

Lebar mengimbangi, lebar pelanggan, lebar tatal

offsetWidth - Ia ialah jumlah lebar elemen termasuk lebar sebenar, padding, sempadan dan bar skrol dalam piksel. Ia tidak termasuk margin dalam lebar. Ia adalah lebar luar elemen HTML.
clientWidth - Ia mengembalikan lebar sebenar + pelapik elemen. Ia tidak termasuk jidar, sempadan atau lebar bar skrol. Ia ialah lebar dalaman elemen HTML.
scrollWidth - Ia mengembalikan jumlah lebar kandungan boleh ditatal, termasuk pelapik, tetapi tidak termasuk jidar, jidar, bar skrol, dsb.

Tatabahasa

Pengguna boleh menggunakan sifat offsetWidth, clientWidth dan scrollWidth dalam JavaScript mengikut sintaks berikut.

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

Salin selepas log masuk

Dalam sintaks di atas, elemen ialah elemen HTML dan kita perlu mencari lebarnya.

Contoh 1

Kami telah mencipta elemen div dan menambahkan kandungan teks dalam contoh di bawah. Selain itu, kami menetapkan lebar tetap untuk elemen div dan menggunakan CSS untuk menjadikannya boleh ditatal secara mendatar.

Dalam JavaScript, kami mengakses elemen div dan menggunakan sifat offsetWidth, clientWidth dan scrollWidth untuk mendapatkan lebar masing-masing. Dalam output, pengguna boleh melihat bahawa offsetWidth adalah bersamaan dengan 330 piksel (300 px lebar sebenar + 10 px padding kiri + 10 px padding kanan + 5 px sempadan kiri + 5 px sempadan kanan). clientWidth adalah sama dengan 320 px kerana ia hanya mengira lebar dan padding sebenar, bukan sempadan. scrollWidth ialah 1549 px, mengukur lebar kandungan boleh tatal.

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

Salin selepas log masuk

Contoh 2

Dalam contoh di bawah, kami menambahkan kandungan teks pada elemen div dan menjadikannya boleh ditatal secara mendatar, sama seperti contoh pertama. Selain itu, kami mencipta medan input untuk mendapatkan lebar, padding dan lebar sempadan pengguna.

Dalam JavaScript, kami mengakses nilai input dan menggayakan elemen HTML berdasarkan nilai tersebut.

Dalam output, pengguna boleh memasukkan nilai input dan klik butang "Dapatkan Lebar" untuk mengira semula lebar elemen.

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

Salin selepas log masuk

Ketinggian mengimbangi, ketinggian pelanggan, ketinggian skrol

Sifat offsetHeight, clientHeight dan scrollHeight adalah serupa dengan offsetWidth, clientWidth dan scrollWidth.

offsetHeight - Ia mengembalikan jumlah ketinggian elemen, termasuk ketinggian sebenar, pelapik dan jidar. Ia adalah ketinggian luar unsur
clientHeight - Ia hanya mengembalikan jumlah ketinggian dan pelapik sebenar. Ini adalah ketinggian dalaman.
scrollHeight - Ia mengembalikan ketinggian kandungan boleh ditatal termasuk pelapik.

Tatabahasa

Pengguna boleh menggunakan sifat JavaScript offsetHeight, clientHeight dan scrollHeight mengikut sintaks berikut.

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

Salin selepas log masuk

Contoh 3

Dalam contoh di bawah, kami telah menambahkan kandungan pada elemen div dan menetapkan Overflow-y untuk menatal supaya ia menatal secara menegak. Dalam JavaScript, kami menggunakan sifat offsetHeight, clientHeight dan scrollHeight untuk mendapatkan ketinggian elemen HTML yang berbeza.

Dalam output, offsetHeight ialah 130 px, iaitu bersamaan dengan 100 px ketinggian sebenar + 10 px padding atas + 10 px padding bawah + 5 px atas border + 5 px bottom padding. Ketinggian pelanggan ialah 120 px, iaitu jumlah lebar dan padding sebenar. Ketinggian tatal ialah 343 piksel, yang sama dengan ketinggian kandungan boleh ditatal.

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

Salin selepas log masuk

Dalam tutorial ini, kami mempelajari cara mendapatkan lebar elemen HTML menggunakan sifat offsetWidth, clientWidth dan scrollWidth. Selain itu, kami mempelajari perbezaan antara sifat offsetHeight, clientHeight dan scrollHeight yang mengembalikan ketinggian elemen HTML yang berbeza.

Atas ialah kandungan terperinci CSS 中的 OffsetWidth、clientWidth、scrollWidth 和 Tinggi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!