Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Nilai Lebar Gulir HTML Menggunakan scrollWidth DOM

Properti scrollWidth DOM pada HTML digunakan untuk mengembalikan nilai lebar dari suatu elemen. Properti scrollWidth juga termasuk pada nilai padding dan konten yang tidak ditampilkan pada layar selama proses overflow, namun tidak termasuk nilai border, scrollbarr, atau margin. Properti scrollWidth merupakan properti yang bersifat read-only.

Cara Penggunaan Properti scrollWidth DOM pada HTML
Ilustrasi scrollWidth DOM HTML

Sebelum memahami lebih dalam materi tentang Mengatur Nilai Lebar Gulir HTML Menggunakan scrollWidth DOM, terlebih dahulu pelajari materi tentang: Mengatur Nilai Gulir Vertikal HTML Menggunakan scrollTop DOM [klik], Mengatur Nilai Gulir Horizontal HTML Menggunakan scrollLeft DOM [klik], dan Mengembalikan Nilai Tinggi Gulir HTML Menggunakan scrollHeight DOM [klik].

Sintak:
element.scrollWidth

Return Values: berfungsi untuk mengembalikan nilai lebar dari konten elemen dalam satuan pixel.

Baca Juga:

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti scrollWidth DOM HTML

</title>

 

<style>

#box 

{

width: 250px;

overflow: auto;}

 

#content 

{

width: 500px;

padding: 10px;

background-color: green;

color: white;}

</style>

 

<!-- script untuk menemukan 

ukuran lebar dari scroll -->

<script>

function Bonss() 

{

var doc = document.getElementById("content");

 

var x = doc.scrollWidth;

 

document.getElementById ("p").innerHTML

= "Width: " 

+

+ "px";

}

</script>

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Properti scrollWidth DOM

</h2>

 

<button 

onclick="Bonss()">

Click Here!

</button>

 

<br><br>

 

<div id = "box">

<div id = "content">

Konten Teks...

</div>

</div>

 

<p id = "p"></p>

 

</body>

 

</html>

Output:

Blog Elfan

Properti scrollWidth DOM



Konten Teks...


Artikel ini didedikasikan kepada: Muhammad Farhanudin, Muhammad Minaur Rohman, Muhammad Rifqi Dzulfiqar, Muhammad Wimas Bahrurrizqi, dan Muhammad Zacky Sirojul Munir.

5 komentar untuk "Mengatur Nilai Lebar Gulir HTML Menggunakan scrollWidth DOM"

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti scrollWidth DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti scrollWidth DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Safari

      Hapus
  2. Apa fungsi dari properti scrollWidth DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti scrollWidth merupakan properti yang bersifat read-only untuk nilai ukuran lebar konten suatu elemen, juga termasuk nilai konten yang tidak terlihat pada layar karena overflow.

      Hapus
    2. Properti scrollWidth berfungsi untuk mengembalikan nilai lebar seluruh elemen dalam satuan pixel, termasuk juga nilai padding, tetapi tidak termasuk nilai border, scrollbar, ataupun nilai margin.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -