Mengatur Celah Kolom HTML Menggunakan columnGap Style DOM
 |
| Ilustrasi columnGap DOM |
- untuk mengembalikan nilai return: object.style.columnGap
- untuk mengatur nilai properti: object.style.columnGap = "length|normal|initial|inherit"
Property Values:
- length: berfungsi untuk mengatur celah kolom dalam unit ukur length.
- normal: merupakan nilai default dari column gap.
- initial: berfungsi untuk mengatur nilai default dari elemen.
- inherit: berfungsi untuk menerima nilai turunan dari elemen parent.
Return Values: mengembalikan sebuah string yang merepresentasikan properti column-gap dari suatu elemen.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style columnGap DOM
</title>
<style>
#myDIV1
{
width: 600px;
height: 70%;
border: 2px solid green;
padding: 10px;
column-count: 3;
}
#p11
{
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<div id="myDIV1">
<p id="p11">
<u>
Blog Elfan
</u>
Sistem operasi digunakan
sebagai penghubung antara
pengguna dan komputer. Tujuan
dari pengembangan sistem
informasi adalah untuk
menyediakan lingkungan yang
dapat digunakan oleh pengguna
untuk menjalankan perangkat
lunak aplikasi secara efektif
dan efisien.
</p>
</div>
<br>
<input
type="button"
onclick="mainFunction()"
value="Submit" />
<script>
function mainFunction()
{
// Pengaturan columnGap dalam
// satuan ukur length.
document.getElementById(
"myDIV1").style.columnGap = "100px";
}
</script>
</body>
</html>
Output:Blog Elfan Sistem operasi digunakan sebagai penghubung antara pengguna dan komputer. Tujuan dari pengembangan sistem informasi adalah untuk menyediakan lingkungan yang dapat digunakan oleh pengguna untuk menjalankan perangkat lunak aplikasi secara efektif dan efisien.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style columnGap DOM
pada HTML
</title>
<style>
#myDIV2
{
width: 600px;
height: 70%;
border: 2px solid green;
padding: 10px;
column-count: 3;
column-gap: 100px;
}
#p12
{
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<div id="myDIV2">
<p id="p12">
<u>Blog Elfan</u>
Sistem informasi merupakan
sistem yang digunakan untuk
bertindak sebagai jembatan
penghubung antara pengguna dan
komputer. Tujuan dari
pengembangan sistem informasi
adalah untuk meyediakan
lingkungan pengembangan bagi
user untuk menjalankan
perangkat lunak aplikasi
secara efektif dan efisien.
</p>
</div>
<br>
<input
type="button"
onclick="mainFunction()"
value="Submit" />
<script>
function mainFunction()
{
// Pengaturan columnGap ke
// normal.
document.getElementById(
"myDIV2").style.columnGap = "normal";
}
</script>
</body>
</html>
Output:Blog ElfanSistem informasi merupakan sistem yang digunakan untuk bertindak sebagai jembatan penghubung antara pengguna dan komputer. Tujuan dari pengembangan sistem informasi adalah untuk meyediakan lingkungan pengembangan bagi user untuk menjalankan perangkat lunak aplikasi secara efektif dan efisien.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style columnGap DOM
pada HTML
</title>
<style>
#myDIV3
{
width: 600px;
height: 70%;
border: 2px solid green;
padding: 10px;
column-count: 3;
column-gap: 100px;
}
#p13
{
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<div id="myDIV3">
<p id="p13">
<u>Blog Elfan</u>
Sistem operasi bertindak
sebagai penghubung antara
pengguna dan perangkat keras
atau komputer. Tujuan dari
pengembangan sistem operasi
adalah untuk menyediakan
lingkungan dimana pengguna
dapat menjalankan perangkat
lunak aplikasi secara efektif
dan efisien pada perangkat
keras atau komputer.
</p>
</div>
<br>
<input
type="button"
onclick="mainFunction()"
value="Submit" />
<script>
function mainFunction()
{
// Pengaturan columnGap
// menjadi normal.
document.getElementById(
"myDIV3").style.columnGap = "initial";
}
</script>
</body>
</html>
Output:Blog ElfanSistem operasi bertindak sebagai penghubung antara pengguna dan perangkat keras atau komputer. Tujuan dari pengembangan sistem operasi adalah untuk menyediakan lingkungan dimana pengguna dapat menjalankan perangkat lunak aplikasi secara efektif dan efisien pada perangkat keras atau komputer.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style columnGap DOM
</title>
<style>
#myDIV4
{
width: 600px;
height: 60%;
border: 2px solid green;
padding: 10px;
column-count: 3;
column-gap: 100px;
}
#p14
{
column-gap: 50px;
}
</style>
</head>
<body>
<div id="myDIV4">
<p id="p14">
<u style="color: green ;
font-size: 20px;">
Blog Elfan
</u>
<br>
Sistem operasi berfungsi
sebagai penghubung antara
pengguna dan perangkat keras
atau komputer. Tujuan dari
pengembangan sistem informasi
adalah untuk menyediakan
pengguna suatu lingkungan yang
dapat digunakan untuk
menjalankan aplikasi secara
efektif dan efisien.
</p>
</div>
<br>
<input
type="button"
onclick="mainFunction()"
value="Submit" />
<script>
function mainFunction()
{
// Pengaturan columnGap
// "inherit".
document.getElementById(
"myDIV4").style.columnGap = "inherit";
}
</script>
</body>
</html>
Output:Blog Elfan
Sistem operasi berfungsi sebagai penghubung antara pengguna dan perangkat keras atau komputer. Tujuan dari pengembangan sistem informasi adalah untuk menyediakan pengguna suatu lingkungan yang dapat digunakan untuk menjalankan aplikasi secara efektif dan efisien.
Catatan: gunakan MozColumnRule untuk browser Mozilla Firefox.
- 5 Value Properti columns Style DOM pada HTML [klik]
- 4 Value Properti columnSpan Style DOM pada HTML [klik]
- 4 Value Properti counterIncrement Style DOM pada HTML [klik]
- 5 Value Properti counterReset Style DOM pada HTML [klik]
- 37 Value Properti Cursor Style DOM pada HTML [klik]
- 4 Value Properti Direction Style DOM pada HTML [klik]
- 22 Value Properti Display Style DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti columnGap Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser populer yang dapat digunakan untuk mengaktifkan properti columnGap Style DOM pada HTML:
Hapus1. Google Chrome
2. Edge
3. Opera
4. Safari
Apa yang dimaksud dengan properti columnGap Style DOM pada HTML?
BalasHapusProperti columnGap digunakan untuk menentukan jarak antar kolom DOM pada HTML.
HapusJika terdapat aturan kolom diantara kolom yang digunakan, maka aturan tersebut akan muncul dibagian tengah dari kolom yang menggunakan properti columnGap.
Hapus