Lompat ke konten Lompat ke sidebar Lompat ke footer

columnRule Style HTML DOM dan Fungsinya

Properti Style columnRule DOM pada HTML berfungsi untuk mengatur nilai width, style, dan color dari rule diantara column.

5 Value Properti columnRule Style DOM pada HTML
Properti columnRule DOM

Sebelum memahami lebih dalam materi tentang columnRule Style HTML DOM dan Fungsinya, terlebih dahulu pelajari materi tentang: Mengatur Celah Kolom HTML Menggunakan columnGap Style DOM [klik], columnFill Style HTML DOM dan Fungsinya [klik], dan Menghitung Kolom HTML Menggunakan columnCount Style DOM [klik].

Sintak:
  • 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.

Baca Juga:

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

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.



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

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.



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

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.



Catatan: gunakan MozColumnRule untuk browser tipe Mozilla Firefox.

Artikel ini didedikasikan kepada: Nufal Mubarok, Nur Salisa Qurrota A'Yun, Panji Bagus Setiawan, Prasetyo Adi Setiawan, dan Pratama Priya Pambudi.

5 komentar untuk "columnRule Style HTML DOM dan Fungsinya"

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

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti columnRule Style DOM pada HTML:
      1. Google Chrome
      2. Edge
      3. Opera
      4. Safari

      Hapus
  2. Apa yang dimaksud dengan properti columnRule Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti columnRule Style DOM pada HTML merupakan properti yang digunakan untuk mengatur nilai lebar, style, dan warna dari rule antar kolom.

      Hapus
    2. Properti columnRule Style DOM pada HTML digunakan untuk mendapatkan atau mengatur nilai properti columnRule.

      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 -