columnRule Style HTML DOM dan Fungsinya
- digunakan untuk mendapatkan nilai columnRule: object.style.columnRule = value
- digunakan untuk mengatur nilai properti columnRule: object.style.columnRule = "column-rule-width column-rule-style column-rule-color|initial|inherit"
Property Values:
- columnRuleWidth: nilai default dari properti adalah medium, dimana nilai ini berfungsi untuk mengatur nilai width diantara kolom.
- columnRuleStyle: berfungsi untuk mengatur style dari rule, dimana nilai "none" merupakan nilai default-nya.
- columnRuleColor: berfungsi untuk mengatur warna dari rule, dimana nilai elemen color merupakan nilai default-nya.
- initial: berfungsi untuk mengatur properti ke nilai default.
- inherit: berfungsi untuk menerima nilai turunan dari elemen parent.
Return Values: digunakan untuk mengembalikan sebuah string yang merepresentasikan properti column-rule dari elemen html yang dipilih.
Contoh: columnRuleWidth, columnRuleStyle, dan columnRuleColor.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style columnRule DOM
</title>
<style>
#mainDIV1
{
width: 80%;
height: 50%;
border: 2px solid green;
padding: 10px;
column-count: 3;
}
</style>
</head>
<body>
<div id="mainDIV1">
<p id="p1">
<u style="color: green ;font-size: 20px;">
Blog Elfan
</u>
<br>
</p>
Sistem operasi merupakan
sistem yang digunakan untuk
bertindak sebagai jembatan
antara pengguna dan komputer
atau perangkat keras. Tujuan
dari penggunakan sistem
operasi adalah untuk
menyediakan lingkungan dimana
pengguna dapat menjalankan
perangkat lunak aplikasi
secara efektif dan efisien.
</p>
</div>
<br>
<input
type="button"
onclick="mainFunction()"
value="Submit" />
<script>
function mainFunction()
{
document.getElementById(
"mainDIV1").style.columnRuleWidth = "3px";
document.getElementById(
"mainDIV1").style.columnRuleStyle = "solid";
document.getElementById(
"mainDIV1").style.columnRuleColor = "red";
}
</script>
</body>
</html>
Output:Blog Elfan
Contoh: digunakan untuk mengatur nilai properti ke nilai default-nya dari properti. Untuk initial value rule-style dan rule-color akan diubah menjadi nilai warna 'none' dan nilai 'default'.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style columnRule DOM
</title>
<style>
#mainDIV2
{
width: 80%;
height: 50%;
border: 2px solid green;
padding: 10px;
column-count: 3;
column-rule-style: solid;
column-rule-width: 3px;
column-rule-color: red;
}
</style>
</head>
<body>
<div id="mainDIV2">
<p id="p1">
<u style="color: green ;font-size: 20px;">
Blog Elfan
</u>
<br>
</p>
Sistem operasi merupakan
sistem yang digunakan untuk
menghubungkan pengguna dan
perangkat keras atau komputer.
Pengembangan sistem operasi
bertujuan untuk memberikan
akses pengguna agar bisa
menjalankan perangkat lunak
aplikasi secara efektif dan
efisien dalam perangkat keras
atau komputer.
</p>
</div>
<br>
<input
type="button"
onclick="mainFunction()"
value="Submit" />
<script>
function mainFunction()
{
document.getElementById(
"mainDIV2").style.columnRule = "initial";
}
</script>
</body>
</html>
Output:Blog Elfan
Contoh: berfungsi untuk menerima nilai turunan properti dari elemen parent. Dengan menggunakan inherit, maka dapat dilakukan pengaturan untuk rule-style dan rule-color berbeda dari nilai awal yang telah diatur sebelumnya.
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style columnRule DOM
</title>
<style>
#mainDIV3
{
width: 80%;
height: 50%;
border: 2px solid green;
padding: 10px;
column-count: 3;
column-rule-style: solid;
column-rule-width: 3px;
column-rule-color: red;
}
</style>
</head>
<body>
<div id="mainDIV3">
<p id="p1">
<u style="color: green ;font-size: 20px;">
Blog Elfan
</u>
<br>
</p>
Sistem operasi merupakan
perangkat lunak sistem yang
digunakan untuk menghubungkan
user dan perangkat keras atau
komputer. Pengembangan sistem
informasi bertujuan untuk user
menjalankan perangkat lunak
aplikasi dalam lingkungan yang
efektif dan efisien.
</p>
</p>
</div>
<br>
<input
type="button"
onclick="mainFunction()"
value="Submit" />
<script>
function mainFunction()
{
document.getElementById(
"mainDIV3").style.columnRule = "initial";
}
</script>
</body>
</html>
Output:Blog Elfan
Catatan: gunakan MozColumnRule untuk browser tipe Mozilla Firefox.
- 4 Value Properti columnSpan Style DOM pada HTML
- 4 Value Properti counterIncrement Style DOM pada HTML
- 5 Value Properti counterReset Style DOM pada HTML
- 37 Value Properti Cursor Style DOM pada HTML
- 4 Value Properti Direction Style DOM pada HTML
- 22 Value Properti Display Style DOM pada HTML
- 4 Value Properti emptyCells Style DOM pada HTML
5 komentar untuk "columnRule Style HTML DOM dan Fungsinya"
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 -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti columnRule Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti columnRule Style DOM pada HTML:
Hapus1. Google Chrome
2. Edge
3. Opera
4. Safari
Apa yang dimaksud dengan properti columnRule Style DOM pada HTML?
BalasHapusProperti columnRule Style DOM pada HTML merupakan properti yang digunakan untuk mengatur nilai lebar, style, dan warna dari rule antar kolom.
HapusProperti columnRule Style DOM pada HTML digunakan untuk mendapatkan atau mengatur nilai properti columnRule.
Hapus