columnRule Style HTML DOM dan Fungsinya

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

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, columnFill Style HTML DOM dan Fungsinya, dan Menghitung Kolom HTML Menggunakan columnCount Style DOM.

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>

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" />

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>

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" />

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>

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>

</div>

<br>

<input

type="button"

onclick="mainFunction()"

value="Submit" />

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.

Pada pengembangan halaman web menggunakan HTML, tata letak dan desain memainkan peran penting dalam memberikan pengalaman visual yang baik bagi pengguna. Salah satu cara untuk menata elemen-elemen halaman adalah dengan menggunakan gaya atau atribut tertentu yang disediakan oleh HTML DOM (Model Objek Dokumen). Salah satu gaya yang bisa digunakan dalam pengaturan tata letak kolom adalah columnRule. Gaya ini mempengaruhi penampilan garis yang membatasi kolom-kolom dalam sebuah elemen yang diatur menjadi beberapa kolom.

Gaya columnRule pada HTML DOM digunakan untuk mengatur tampilan garis pemisah antar kolom dalam elemen yang memiliki kolom-kolom di dalamnya. Ketika sebuah elemen diatur untuk membagi isinya menjadi beberapa kolom, garis pemisah ini dapat digunakan untuk memperjelas batas antar kolom, memberikan struktur visual yang lebih jelas, serta meningkatkan keterbacaan isi dari halaman tersebut. Fitur ini sangat berguna ketika bekerja dengan tata letak dua dimensi yang melibatkan pembagian konten dalam bentuk kolom.

Fungsi utama dari columnRule adalah untuk menambahkan garis vertikal yang memisahkan kolom-kolom dalam elemen yang menggunakan tata letak kolom. Garis ini biasanya bersifat vertikal, dan keberadaannya bisa sangat berguna untuk membedakan satu kolom dengan kolom lainnya. Sebagai contoh, ketika menggunakan lebih dari satu kolom untuk menampilkan teks atau gambar, garis pemisah dapat membantu memastikan bahwa setiap kolom tetap terlihat terpisah, meskipun isinya berdekatan.

Dalam penerapannya, columnRule dapat dipersonalisasi lebih lanjut. Pengguna dapat mengatur ketebalan garis, warnanya, serta gaya garis tersebut, apakah solid atau putus-putus. Hal ini memungkinkan penyesuaian visual yang lebih mendalam sesuai dengan desain yang diinginkan. Misalnya, garis pemisah yang lebih tebal dapat digunakan untuk tampilan yang lebih menonjol, sementara garis yang lebih tipis bisa memberikan kesan yang lebih halus.

Penting untuk diingat bahwa columnRule hanya diterapkan pada elemen yang memiliki lebih dari satu kolom. Jadi, untuk elemen yang hanya berisi satu kolom, penggunaan columnRule tidak akan menampilkan hasil apa pun. Karena itu, sebelum memutuskan untuk menggunakan gaya ini, pastikan bahwa elemen yang dimaksud sudah diatur dengan benar untuk memiliki beberapa kolom. Pengaturan kolom biasanya dilakukan dengan menggunakan gaya columns pada elemen tersebut.

Selain itu, pemilihan ketebalan dan gaya garis pemisah sangat bergantung pada desain keseluruhan halaman. Garis yang terlalu tebal atau mencolok dapat mengganggu tampilan jika tidak digunakan dengan bijak, sementara garis yang terlalu tipis mungkin tidak cukup terlihat. Oleh karena itu, dalam mendesain penggunaan columnRule, perlu dipertimbangkan bagaimana garis pemisah tersebut akan berinteraksi dengan elemen-elemen lain di sekitarnya.

Penggunaan columnRule juga dapat memberikan kesan yang lebih teratur dan profesional pada tampilan halaman web. Dalam desain halaman yang melibatkan banyak kolom, garis pemisah antar kolom membantu mengatur alur visual dan memastikan bahwa isi halaman tetap mudah dibaca dan dipahami. Terutama dalam kasus konten yang terdiri dari teks panjang, gambar, atau elemen-elemen lain yang disusun dalam beberapa kolom, garis pemisah dapat menjadi elemen penting dalam meningkatkan navigasi visual.

Selain itu, columnRule tidak hanya berguna untuk memperjelas batas antar kolom dalam elemen yang terstruktur dengan banyak kolom, tetapi juga memberikan keuntungan dalam hal estetika. Dengan menambahkan garis pemisah yang sesuai, tampilan kolom menjadi lebih rapi dan terorganisir, menciptakan kesan yang lebih teratur dan tidak acak. Hal ini sangat penting untuk desain halaman web yang bertujuan memberikan pengalaman pengguna yang nyaman dan efisien.

Secara keseluruhan, columnRule adalah gaya yang sangat berguna dalam konteks desain halaman web yang melibatkan penggunaan kolom. Fungsinya tidak hanya terbatas pada pemisah visual antar kolom, tetapi juga memberikan banyak fleksibilitas dalam penyesuaian estetika. Pengguna dapat menentukan ketebalan, warna, dan gaya garis yang akan digunakan sebagai pemisah antar kolom. Dengan begitu, elemen-elemen halaman web yang menggunakan banyak kolom dapat terlihat lebih rapi dan terorganisir, yang pada gilirannya meningkatkan kualitas desain dan pengalaman visual pengguna.

Namun, meskipun columnRule menawarkan banyak keuntungan, penggunaan gaya ini tetap harus dilakukan dengan hati-hati. Penggunaan garis pemisah yang terlalu mencolok atau berlebihan dapat mengganggu tampilan keseluruhan dan mengurangi kejelasan konten. Oleh karena itu, penting untuk menyesuaikan penggunaan columnRule dengan kebutuhan desain serta menjaga keseimbangan antara estetika dan fungsionalitas halaman.

Dengan demikian, penerapan columnRule dalam desain halaman web memberikan fleksibilitas dan kontrol lebih besar terhadap bagaimana kolom-kolom diatur dan dipisahkan. Ketika digunakan dengan bijak, fitur ini dapat meningkatkan kualitas desain dan memberikan pengalaman visual yang lebih baik bagi pengguna. Keberadaan garis pemisah antar kolom dapat memberikan struktur yang lebih jelas, meningkatkan keterbacaan, dan membuat tampilan halaman web terlihat lebih terorganisir. Semua ini berkontribusi pada kenyamanan pengguna dan kesan profesional yang diberikan oleh halaman web tersebut.

Referensi Tambahan:

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

Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "columnRule Style HTML DOM dan Fungsinya"

AnonimSelasa, 21 Juni 2022 pukul 19.34.00 WIB
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti columnRule Style DOM pada HTML?
BalasHapus
Balasan
AnonimSenin, 27 Juni 2022 pukul 08.24.00 WIB
Apa yang dimaksud dengan properti columnRule Style DOM pada HTML?
BalasHapus
Balasan

Tambahkan komentar

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 -

E-SISTEM:	Bahasa Pemrograman:
open_in_newE-RAPORT open_in_newE-PERPUS open_in_newE-LITERASI open_in_newE-KONSELING	open_in_newBahasa HTML open_in_newBahasa C open_in_newBahasa Java open_in_newBahasa C++
Materi Penelitian:	Administrasi Siswa:
open_in_newKlasifikasi Penelitian open_in_newPenelitian Tindakan Kelas open_in_newStatistika Penelitian open_in_newContoh Skripsi	open_in_newNilai dan Arsip open_in_newPerbaikan Data open_in_newKatalog Siswa open_in_newBuku Digital
Referensi Umum:	Magic
open_in_newMapel Informatika open_in_newLogo Instansi dan Organisasi open_in_newArtikel open_in_newTools dan Game	Mystery Box

PENELITIAN.ID

columnRule Style HTML DOM dan Fungsinya

5 komentar untuk "columnRule Style HTML DOM dan Fungsinya"

Menu Halaman Statis