Mengatur Lebar Kolom HTML Menggunakan columnRuleWidth Style DOM
 |
| Ilustrasi columnRuleWidth Style DOM |
- berfungsi untuk mengembalikan nilai properti columnRuleWidth: object.style.columnRuleWidth
- berfungsi untuk menenentukan nilai properti columnRuleWidth: object.style.columnRuleWidth = "medium|thin|thick|length|initial|inherit"
Property Values:
- thin: digunakan untuk menciptakan sebuah rule thin diantara kolom.
- medium: digunakan untuk menciptakan sebuah nilai lebar rule medium diantara kolom, dan merupakan nilai default dari properti columnRuleWidth.
- thick: digunakan untuk menciptakan sebuah nilai lebar rule thick diantara kolom.
- length: digunakan untuk mengatur nilai lebar berdasarkan ukuran length dan tidak menerima nilai negatif.
- initial: digunakan untuk mengatur properti columnRuleWidth ke nilai default.
- inherit: digunakan untuk menerima nilai turunan dari elemen parent.
Return Value: berfungsi untuk mengembalikan sebuang string yang merepresentasikan nilai properti columnRuleWidth dari suatu elemen.
Contoh: digunakan untuk mendeskripsikan nilai length dari properti.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style columnRuleWidth
DOM
</title>
<style>
#MKN1
{
/* Untuk Chrome dan Safari
tipe lama */
-webkit-column-count:4;
-webkit-column-rule: 1px green solid;
/* Untuk browser Firefox */
-moz-column-count:4;
-moz-column-rule: 1px green solid;
-webkit-column-count:4;
-webkit-column-rule: 1px green solid;
text-align:justify;
}
</style>
</head>
<body>
<div id = "MKN1">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai materi
tentang pemrograman dan materi
TIK lainnya yang sedang
populer saat ini.
</div>
<p>
Klik tombol untuk mengubah
ukuran lebar column-rule
</p>
<button
onclick = "myBons1s()">
Click Here!
</button>
<script>
function myBons1s()
{
document.getElementById("MKN1").style.columnRuleWidth
= "10px";
}
</script>
</body>
</html>
Output:Klik tombol untuk mengubah ukuran lebar column-rule
Contoh: digunakan untuk mendeskripsikan nilai properti medium.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style columnRuleWidth
DOM
</title>
<style>
#MKN2
{
/* Untuk browser Chrome dan
Safari tipe lama */
-webkit-column-count:4;
-webkit-column-rule: 1px green solid;
/* Untuk browser Firefox */
-moz-column-count:4;
-moz-column-rule: 1px green solid;
-webkit-column-count:4;
-webkit-column-rule: 1px green solid;
text-align:justify;
}
</style>
</head>
<body>
<div id = "MKN2">
Blog TIK merupakan portal ilmu
komputer yang digunakan untuk
mempelajari berbagai materi
pemrograman dan materi TIK
lainnya yang sedang populer
saat ini.
</div>
<p>
Klik tombol untuk mengubah
ukuran lebar width
</p>
<button
onclick = "myBons2s()">
Click Here!
</button>
<script>
function myBons2s()
{
document.getElementById("MKN2").style.columnRuleWidth
= "medium";
}
</script>
</body>
</html>
Output:Klik tombol untuk mengubah ukuran lebar width
- 37 Value Properti Cursor Style DOM pada HTML [klik]
- 4 Value Properti Direction Style DOM pada HTML [klik]
- 22 Value Properti Display Style DOM pada HTML [klik]
- 4 Value Properti emptyCells Style DOM pada HTML [klik]
- 16 Value Properti Filter Style DOM pada HTML [klik]
- 4 Value Properti Flex Style DOM pada HTML [klik]
- 4 Value Properti flexBasis Style DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti columnRuleWidth Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti columnRuleWidth Style DOM pada HTML:
Hapus1. Google Chrome
2. Firefox menggunakan MozColumnRuleWidth
3. Internet Explorer
4. Opera
5. Apple Safari
Apa yang dimaksud dengan properti columnRuleWidth Style DOM pada HTML?
BalasHapusProperti columnRuleWidth Style DOM pada HTML merupakan properti yang digunakan untuk mengatur ukuran lebar rule antar kolom pada dokumen HTML. Nilai default dari properti columnRuleWidth adalah medium.
HapusProperti columnRuleWidth Style DOM pada HTML merupakan properti yang digunakan untuk menentukan lebar aturan antar kolom.
Hapus