Mendapatkan Nilai Width HTML Menggunakan clientWidth DOM
Properti clientWidth DOM HTML digunakan untuk mengembalikan viewable width dari elemen spesifik termasuk ukuran padding, tetapi tidak termasuk ukuran lebar margin, border, dan scrollbar. Properti ini hanya mengembalikan nilai lebar aktual dari elemen yang tampak atau yang terlihat oleh user, dimana properti clientWidth itu sendiri bersifat read-only.
Sintak:
element.clientWidth
Return Value: mengembalikan nilai numerik yang merepresentasikan viewable width dari elemen.
Contoh:
 |
| Ilustrasi clientWidth DOM HTML |
Sebelum memahami lebih dalam materi tentang Mendapatkan Nilai Width HTML Menggunakan clientWidth DOM, terlebih dahulu pelajari materi tentang: Mendapatkan Nilai Border Top HTML Menggunakan clientTop DOM [klik], Mendapatkan Nilai Border Kiri HTML Menggunakan clientLeft DOM [klik], dan Mendapatkan Nilai Height HTML Menggunakan clientHeight DOM [klik].
element.clientWidth
Baca Juga:
<!DOCTYPE html>
<html>
<head>
<title>
Properti clientWidth DOM HTML
</title>
<style>
h1
{
color: green;
font-size: 35px;}
#MKN
{
height: 200px;
width: 250px;
padding: 40px;
margin: 25px;
border: 5px solid coral;
background-color: green;}
</style>
</head>
<body>
<center>
<h1>
Blog Elfan
</h1>
<h2>
Properti clientWidth DOM
</h2>
<div id="MKN">
<h4 style="color:white;font-size:40px;">
Blog Elfan
</h4>
<p id="sudo" style="color:white;"></p>
</div>
<button
onclick="Bons()">
Submit
</button>
<script>
function Bons()
{
var w = document.getElementById("MKN");
var x = "viewable Height is: "
+ w.clientHeight
+"px<br>";
x += "viewable width is:: "
+ w.clientWidth
+ "px";
document.getElementById("sudo").innerHTML = x;
}
</script>
</center>
</body>
</html>
Output:Blog Elfan
Properti clientWidth DOM
Blog Elfan
Referensi Tambahan:
- Cara Penggunaan Method exitFullscreen() DOM pada HTML [klik]
- 2 Contoh Penggunaan Properti firstChild DOM pada HTML [klik]
- 2 Nilai Return Properti firstElementChild DOM pada HTML [klik]
- 2 Contoh Penggunaan Method focus() DOM pada HTML [klik]
- 2 Contoh Penggunaan Method getAttribute() DOM pada HTML [klik]
- Cara Penggunaan Method getAttributeNode() DOM pada HTML [klik]
- 8 Properti Penggunaan Method getBoundingClientRect() DOM pada HTML [klik]
Artikel ini didedikasikan kepada: Farid Naufalabror, Fathia Hanif Tiaraningrum, Faustina Helene Tunggadewi, Feby Rahma Aji, dan Ferry Afid Nugroho.
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti clientWidth DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti clientWidht DOM pada HTML:
Hapus1. Google Chrome 1.0
2. Internet Explorer 4.0
3. Firefox 1.0
4. Opera 3.5
5. Safari 1.0
Apa fungsi dari properti clientWidth DOM pada HTML?
BalasHapusProperti clientWidth DOM pada HTML berfungsi untuk mengembalikan ukuran lebar elemen yang dapat dilihat dalam satuan pixel, termasuk juga ukuran padding, tetapi tidak termasuk ukuran border, scrollbar, atau margin.
HapusProperti clientWidht merupakan ukuran nol untuk elemen sebaris dan elemen tanpa CSS. Jika tidak, maka properti ini merupakan properti yang memberikan nilai lebar dari bagian elemen dalam satuan pixel. Properti clientWidth termasuk juga padding, tetapi tidak termasuk untuk ukuran border, margin, dan scrollbar vertikal.
Hapus