Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mengatur Lebar Kolom HTML Menggunakan columnRuleWidth Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti Style columnRuleWidth DOM pada HTML digunakan untuk mendefinisikan atau menentukan nilai lebar dari rule diantara elemen pada dokumen html.


Sebelum memahami lebih dalam materi tentang Mengatur Lebar Kolom HTML Menggunakan columnRuleWidth Style DOM, terlebih dahulu pelajari materi tentang: columnRuleStyle DOM HTML Beserta Fungsinya, Mengatur Warna HTML Menggunakan columnRuleColor Style DOM, dan columnRule Style HTML DOM dan Fungsinya.

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

Baca Juga:

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:
Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi tentang pemrograman dan materi TIK lainnya yang sedang populer saat ini.

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:
Blog TIK merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai materi pemrograman dan materi TIK lainnya yang sedang populer saat ini.

Klik tombol untuk mengubah ukuran lebar width


Artikel ini didedikasikan kepada: Prasetyo Adi Setiawan, Pratama Priya Pambudi, Puspita Intan Sari, Rafi Aldianto, dan Rahmuda Ahimsa Ibrar Ilyasa.
Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Lebar Kolom HTML Menggunakan columnRuleWidth Style DOM"

  1. AnonimSelasa, 28 Juni 2022 pukul 11.00.00 WIB

    Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti columnRuleWidth Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 28 Juni 2022 pukul 11.01.00 WIB

      Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti columnRuleWidth Style DOM pada HTML:
      1. Google Chrome
      2. Firefox menggunakan MozColumnRuleWidth
      3. Internet Explorer
      4. Opera
      5. Apple Safari

      Hapus
  2. AnonimRabu, 29 Juni 2022 pukul 10.07.00 WIB

    Apa yang dimaksud dengan properti columnRuleWidth Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 29 Juni 2022 pukul 10.07.00 WIB

      Properti 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.

      Hapus
    2. AnonimRabu, 29 Juni 2022 pukul 10.08.00 WIB

      Properti columnRuleWidth Style DOM pada HTML merupakan properti yang digunakan untuk menentukan lebar aturan antar kolom.

      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 -