columnRuleStyle DOM HTML Beserta Fungsinya

Properti style columnRuleStyle DOM pada HTML digunakan untuk mendefinisikan atau menentukan style dari rule diantara kolom pada dokumen HTML.

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

Sintak:

Digunakan untuk mengatur nilai properti: object.style.columnRuleStyle = "none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit"
Digunakan untuk mengembalikan nilai properti: object.style.columnRuleStyle"

Property Values:

none: Tidak menciptakan border apapun pada properti, dan merupakan nilai default dari properti columnRuleStyle.
hidden: Sama seperti value 'none', namun dapat digunakan untuk membantuk selama border conflict resolution dalam tabel elemen.
dotted: Menggunakan dot atau titik sebagai border.
dashed: Menggunakan garis dash sebagai border.
solid: Menggukana garis solid tunggal sebagai border.
double: Menggunakan dua garis sebagai border.
groove: Menggunakan border 3D grooved pada elemen, dengan efek bergantung pada nilai border-color yang telah ditentukan.
ridge: Menggunakan border 3D ridged pada elemen, dengan efek bergantung pada nilai border-color yang telah ditentukan.
inset: Menggunakan border 3D inset pada elemen, dengan nilai efek bergantung pada nilai border-color yang telah ditentukan.
outset: Menggunakan border 3D outset pada elemen, dengan nilai efek bergantung pada nilai border-color yang telah ditentukan.
initial: Berfungsi untuk mengatur nilai properti ke nilai initial.
inherit: Berfungsi untuk mengatur nilai properti ke nilai turunan dari elemen parent.

Return Value: Berfungsi untuk mengembalikan sebuang nilai string yang merepresentasikan properti dari elemen.

Contoh: Menciptakan sebuah dot rule.

<!DOCTYPE html>

<html>

<head>

<title>

Properti Style columnRuleStyle

DOM

</title>

<style>

#bonsdiv

{

column-count: 4;

column-rule: 5px green;

}

</style>

</head>

<body>

<div

class="container"

style="color:green"

id="bonsdiv">

MakanNasiPadang MakanNasiPadang MakanNasiPadang

</div>

<p>

Untuk melihat efek, klik

tombol berikut:

</p>

<button

onclick="bonsFunction()">

Click

</button>

function bonsFunction()

{

// Mengatur properti dot.

document.getElementById(

"bonsdiv").style.columnRuleStyle = "dotted";

}

</script>

</body>

</html>

Output:

MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang MakanNasiPadang

Untuk melihat efek, klik tombol berikut:

Contoh: Menciptakan sebuah dash rule.

<!DOCTYPE html>

<html>

<head>

<title>

Properti Style columnRuleStyle

DOM

</title>

<style>

#bonsdiv

{

column-count: 4;

column-rule: 5px green;

}

</style>

</head>

<body>

<div

class="container"

style="color:green"

id="bonsdiv">

MakanNasiPadang MakanNasiPadang MakanNasiPadang

</div>

<p>

Klik tombol untuk melihat efek

pada elemen:

</p>

<button

onclick="bonsFunction()">

Click

</button>

function bonsFunction()

{

document.getElementById(

"bonsdiv").style.columnRuleStyle = "dashed";

}

</script>

</body>

</html>

Output:

Klik tombol untuk melihat efek pada elemen:

Contoh: Menciptakan double rule.

<!DOCTYPE html>

<html>

<head>

<title>

Properti Style columnRuleStyle

DOM

</title>

<style>

#bonsdiv

{

column-count: 4;

column-rule: 5px green;

}

</style>

</head>

<body>

<div

class="container"

style="color:green"

id="bonsdiv">

MakanNasiPadang MakanNasiPadang MakanNasiPadang

</div>

<p>

Klik tombol untuk melihat efek

perubahan:

</p>

<button

onclick="bonsFunction()">

Click

</button>

function bonsFunction()

{

document.getElementById(

"bonsdiv").style.columnRuleStyle = "double";

}

</script>

</body>

</html>

Output:

Klik tombol untuk melihat efek perubahan:

Contoh: Menciptakan sebuah solid rule.

<!DOCTYPE html>

<html>

<head>

<title>

Properti Style columnRuleStyle

DOM

</title>

<style>

#bonsdiv

{

column-count: 4;

column-rule: 5px green;

}

</style>

</head>

<body>

<div

class="container"

style="color:green"

id="bonsdiv">

MakanNasiPadang MakanNasiPadang MakanNasiPadang

</div>

<p>

Klik tombol untuk melihat efek

perubahan:

</p>

<button

onclick="bonsFunction()">

Click

</button>

function bonsFunction()

{

document.getElementById(

"bonsdiv").style.columnRuleStyle = "solid";

}

</script>

</body>

</html>

Output:

Klik tombol untuk melihat efek perubahan:

Contoh: Menciptakan 3D grooved rule.

<!DOCTYPE html>

<html>

<head>

<title>

Properti Style columnRuleStyle

DOM

</title>

<style>

#bonsdiv

{

column-count: 4;

column-rule: 5px green;

}

</style>

</head>

<body>

<div

class="container"

style="color:green"

id="bonsdiv">

MakanNasiPadang MakanNasiPadang MakanNasiPadang

</div>

<p>

Klik tombol untuk melihat

perubahan efek:

</p>

<button

onclick="bonsFunction()">

Click

</button>

function bonsFunction()

{

document.getElementById(

"bonsdiv").style.columnRuleStyle = "groove";

}

</script>

</body>

</html>

Output:

Klik tombol untuk melihat perubahan efek:

Contoh: Menciptakan 3D ridged rule.

<!DOCTYPE html>

<html>

<head>

<title>

Properti Style columnRuleStyle

DOM

</title>

<style>

#bonsdiv

{

column-count: 4;

column-rule: 5px green;

}

</style>

</head>

<body>

<div

class="container"

style="color:green"

id="bonsdiv">

MakanNasiPadang MakanNasiPadang MakanNasiPadang

</div>

<p>

Klik tombol untuk melihat

perubahan elemen:

</p>

<button

onclick="bonsFunction()">

Click

</button>

function bonsFunction()

{

document.getElementById(

"bonsdiv").style.columnRuleStyle = "ridge";

}

</script>

</body>

</html>

Output:

Klik tombol untuk melihat perubahan elemen:

Contoh: Menciptakan 3D inset rule.

<!DOCTYPE html>

<html>

<head>

<title>

Properti Style columnRuleStyle

DOM

</title>

<style>

#bonsdiv

{

column-count: 4;

column-rule: 5px green;

}

</style>

</head>

<body>

<div

class="container"

style="color:green"

id="bonsdiv">

MakanNasiRendang MakanNasiRendang MakanNasiRendang

</div>

<p>

Klik tombol untuk melihat efek

perubahan:

</p>

<button

onclick="bonsFunction()">

Click

</button>

function bonsFunction()

{

document.getElementById(

"bonsdiv").style.columnRuleStyle = "inset";

}

</script>

</body>

</html>

Output:

MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang MakanNasiRendang

Klik tombol untuk melihat efek perubahan:

Contoh: Menciptakan 3D outset rule.

<!DOCTYPE html>

<html>

<head>

<title>

Properti Style columnRuleStyle

DOM

</title>

<style>

#bonsdiv

{

column-count: 4;

column-rule: 5px green;

}

</style>

</head>

<body>

<div

class="container"

style="color:green"

id="bonsdiv">

CowaMakanDonat CowaMakanDonat CowaMakanDonat

</div>

<p>

Klik tombol untuk melihat

perubahan elemen:

</p>

<button

onclick="bonsFunction()">

Click

</button>

function bonsFunction()

{

document.getElementById(

"bonsdiv").style.columnRuleStyle = "outset";

}

</script>

</body>

</html>

Output:

CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat CowaMakanDonat

Klik tombol untuk melihat perubahan elemen:

Baca Juga:

Pembahasan mengenai properti columnRuleStyle pada DOM dalam HTML memfokuskan pada pengelolaan garis pemisah antar kolom dalam elemen yang memiliki tata letak kolom. Properti ini memberikan kendali penuh terhadap gaya visual garis pemisah, memungkinkan pengguna untuk menciptakan tampilan yang lebih menarik dan terorganisir. Dengan memanfaatkan properti ini, setiap kolom dalam elemen yang memiliki tata letak berbasis kolom dapat dipisahkan dengan garis yang memiliki karakteristik tertentu, sesuai kebutuhan desain.

Properti ini digunakan untuk menentukan bentuk garis pemisah antar kolom. Beberapa bentuk garis yang dapat diatur meliputi garis penuh, garis putus-putus, atau garis titik-titik. Pilihan bentuk garis ini memberikan fleksibilitas bagi desainer dalam menciptakan tata letak yang sesuai dengan tema atau gaya visual tertentu. Misalnya, garis penuh sering digunakan untuk memberikan kesan formal atau tegas, sementara garis putus-putus atau titik-titik lebih sering digunakan untuk tampilan yang lebih santai atau dekoratif.

Pengaturan ini sangat berguna dalam berbagai konteks, seperti ketika membuat tata letak artikel, laporan, atau dokumen yang memerlukan pemisahan visual antar bagian. Garis pemisah yang diatur dengan baik dapat membantu pembaca memahami struktur konten dengan lebih mudah. Selain itu, garis tersebut juga dapat meningkatkan estetika keseluruhan dari elemen yang dirancang.

Selain bentuk garis, properti ini juga mendukung penerapan berbagai kombinasi dengan properti lain untuk menghasilkan efek visual yang lebih kompleks. Misalnya, properti ini dapat digunakan bersamaan dengan pengaturan warna dan lebar garis untuk menciptakan pemisahan yang lebih menarik secara visual. Kombinasi ini memungkinkan desainer menyesuaikan tampilan garis pemisah dengan tema keseluruhan halaman atau elemen yang bersangkutan.

Cara kerja properti ini bergantung pada elemen yang menggunakan tata letak berbasis kolom. Elemen tersebut harus memiliki pengaturan jumlah kolom tertentu agar properti ini dapat diterapkan. Dalam praktiknya, garis pemisah hanya akan muncul jika terdapat lebih dari satu kolom dalam elemen tersebut. Jika elemen hanya memiliki satu kolom, properti ini tidak akan memberikan efek visual apa pun, karena tidak ada garis yang perlu dipisahkan.

Properti ini juga memberikan keleluasaan bagi desainer untuk menciptakan garis pemisah yang konsisten dengan identitas visual sebuah situs atau aplikasi. Dengan menyesuaikan gaya garis pemisah, elemen visual pada halaman dapat disesuaikan agar seragam dengan elemen lainnya. Hal ini membantu menciptakan kesan profesional dan terorganisir pada tata letak halaman.

Manfaat lain dari properti ini adalah kemampuannya untuk meningkatkan keterbacaan konten. Dalam konteks tertentu, terutama pada teks yang panjang atau memiliki banyak informasi, garis pemisah yang jelas dapat membantu pembaca fokus pada setiap bagian secara lebih efektif. Dengan memisahkan kolom menggunakan garis, setiap bagian terlihat lebih terstruktur, sehingga memudahkan pembaca dalam memindai informasi.

Selain itu, properti ini juga mendukung nilai-nilai keberlanjutan dalam desain web modern. Dengan menggunakan properti ini, desainer dapat menciptakan elemen visual yang sederhana namun tetap menarik, tanpa perlu menggunakan elemen tambahan yang mungkin membebani kinerja halaman. Pendekatan ini tidak hanya efisien secara visual tetapi juga memberikan manfaat dalam hal kecepatan muatan halaman dan pengalaman pengguna yang lebih baik.

Dalam aplikasi praktisnya, properti ini sangat relevan pada berbagai jenis proyek web, termasuk situs berita, portal informasi, dan blog. Pada situs-situs ini, garis pemisah yang diatur dengan baik dapat membantu membedakan bagian konten yang berbeda, sehingga menciptakan pengalaman membaca yang lebih nyaman bagi pengunjung.

Kemampuan untuk mengatur gaya garis pemisah antar kolom juga merupakan bagian dari pengembangan desain responsif. Dalam tata letak responsif, properti ini dapat digunakan untuk memastikan bahwa garis pemisah tetap terlihat baik pada berbagai ukuran layar. Hal ini memungkinkan desainer menciptakan tata letak yang konsisten dan menarik, baik pada perangkat kecil seperti ponsel maupun perangkat besar seperti komputer.

Penting untuk dicatat bahwa properti ini mendukung berbagai nilai yang spesifik untuk gaya garis, seperti penuh, putus-putus, titik-titik, ganda, serta kombinasi lainnya. Setiap nilai ini memiliki karakteristik yang berbeda dan dapat digunakan untuk menciptakan tampilan yang unik sesuai kebutuhan desain. Dengan memanfaatkan variasi ini, desainer dapat menciptakan elemen visual yang tidak monoton dan menarik perhatian.

Kesimpulannya, properti columnRuleStyle pada DOM HTML adalah alat yang sangat berguna dalam menciptakan garis pemisah antar kolom yang estetis dan fungsional. Dengan kemampuannya untuk mengatur gaya garis, properti ini tidak hanya meningkatkan keindahan visual tetapi juga membantu menciptakan tata letak yang lebih terstruktur dan mudah dipahami. Penggunaan properti ini secara efektif dapat memberikan nilai tambah pada desain halaman, memastikan bahwa konten disajikan dengan cara yang menarik dan profesional.

Dalam praktik pengembangan, properti ini memberikan kontribusi besar dalam menciptakan pengalaman pengguna yang lebih terarah dan intuitif. Garis pemisah yang jelas mampu membimbing mata pembaca mengikuti alur konten tanpa kebingungan. Sebagai contoh, dalam tata letak artikel berita, kolom yang dipisahkan dengan garis bergaya tertentu dapat membantu membedakan antara informasi utama dan bagian tambahan seperti opini atau statistik pendukung. Hal ini menciptakan hierarki visual yang memudahkan pembaca untuk menyerap informasi secara efisien.

Selain manfaat fungsional, properti ini juga membuka peluang untuk eksplorasi kreativitas dalam desain web. Desainer dapat mengkombinasikan properti ini dengan berbagai elemen grafis lain untuk menciptakan tampilan unik yang menarik perhatian. Misalnya, garis dengan gaya titik-titik yang berpadu dengan skema warna yang kontras dapat memberikan kesan modern dan dinamis. Sementara itu, garis ganda dengan warna yang lebih lembut sering digunakan untuk tampilan elegan atau formal. Dengan pemanfaatan yang tepat, properti ini tidak hanya menjadi alat teknis, tetapi juga medium ekspresi visual dalam desain.

Fleksibilitas properti ini semakin terasa dengan kemampuannya untuk disesuaikan dengan berbagai tema desain. Apakah untuk situs edukasi, bisnis, hiburan, atau portofolio pribadi, garis pemisah dapat diatur agar mendukung identitas visual yang ingin ditonjolkan. Hal ini penting dalam menciptakan pengalaman yang konsisten dan selaras dengan tujuan dari situs tersebut.

Dari segi teknis, properti ini dapat bekerja secara sinergis dengan properti lain yang terkait dengan kolom, seperti jumlah kolom, lebar kolom, dan jarak antar kolom. Kombinasi ini memberikan kendali penuh kepada desainer dalam menentukan bagaimana setiap elemen dalam tata letak kolom akan terlihat dan berinteraksi. Dengan pendekatan yang strategis, keseluruhan tampilan halaman dapat dioptimalkan untuk estetika dan fungsionalitas secara bersamaan.

Implementasi properti ini juga mendukung praktik terbaik dalam desain web yang responsif. Ketika layar pengguna berubah ukurannya, gaya garis pemisah yang diatur dengan baik dapat tetap terlihat proporsional dan relevan. Hal ini memastikan bahwa pengalaman pengguna tetap konsisten, terlepas dari perangkat yang digunakan. Dalam konteks desain modern yang berfokus pada fleksibilitas dan adaptabilitas, properti ini menjadi salah satu komponen penting yang tidak boleh diabaikan.

Pada pengembangan lebih lanjut, properti ini juga memungkinkan integrasi dengan elemen animasi atau transisi untuk menciptakan efek visual yang lebih dinamis. Sebagai contoh, garis pemisah dapat dirancang untuk muncul dengan transisi halus saat elemen kolom ditampilkan atau diubah. Pendekatan ini tidak hanya menambah estetika, tetapi juga memberikan pengalaman interaktif yang lebih menarik bagi pengguna.

Selain manfaat visual dan teknis, properti ini juga mendukung pengoptimalan konten dari segi aksesibilitas. Dengan pemisahan yang jelas antar kolom, pembaca yang memiliki keterbatasan visual dapat lebih mudah membedakan setiap bagian konten. Ini menunjukkan bagaimana properti ini dapat digunakan untuk menciptakan desain yang inklusif dan ramah bagi berbagai jenis pengguna.

Namun, penting untuk memahami bahwa penggunaan properti ini harus dilakukan dengan bijak. Garis pemisah yang terlalu mencolok atau tidak sesuai dengan tema desain dapat mengalihkan perhatian dari konten utama. Oleh karena itu, desainer perlu mempertimbangkan konteks dan tujuan halaman sebelum memutuskan gaya garis yang akan digunakan. Dengan pendekatan yang tepat, properti ini dapat memberikan nilai tambah yang signifikan pada desain tanpa mengorbankan tujuan utama dari konten.

Dalam keseluruhan proses desain, properti ini merupakan salah satu alat yang menawarkan fleksibilitas tinggi dalam menciptakan tata letak kolom yang terorganisir dan menarik. Dengan kemampuannya untuk mengatur gaya garis pemisah, properti ini memberikan solusi estetis sekaligus fungsional untuk berbagai kebutuhan desain. Penggunaannya yang tepat dapat meningkatkan kualitas visual dan pengalaman pengguna secara keseluruhan, menjadikannya bagian penting dari setiap proyek desain web yang sukses.

Referensi Tambahan:

Artikel ini akan dibaca oleh: Panji Bagus Setiawan, Prasetyo Adi Setiawan, Pratama Priya Pambudi, Puspita Intan Sari, dan Rafi Aldianto.

Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "columnRuleStyle DOM HTML Beserta Fungsinya"

AnonimSelasa, 28 Juni 2022 pukul 10.36.00 WIB
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti columnRuleStyle DOM pada HTML?
BalasHapus
Balasan
AnonimRabu, 29 Juni 2022 pukul 10.02.00 WIB
Apa yang dimaksud dengan properti columnRuleStyle 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

columnRuleStyle DOM HTML Beserta Fungsinya

5 komentar untuk "columnRuleStyle DOM HTML Beserta Fungsinya"

Menu Halaman Statis