Menghitung Kolom HTML Menggunakan columnCount Style DOM
 |
| Ilustrasi columnCount DOM |
- untuk mengembalikan nilai: object.style.columnCount
- untuk mengatur nilai: object.style.columnCount = "number|auto|initial|inherit"
Property Values:
- number: penentuan angka dari kolom.
- auto: merupakan nilai default yang bergantung pada beberapa nilai properti.
- initial: mengatur nilai default.
- inherit: menerima nilai turunan dari elemen parent.
Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresenasikan properti column-count dari suatu elemen.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style columnCount DOM
</title>
<style>
#mainDIV1
{
width: 350px;
height: 50%;
border: 2px solid green;
padding: 10px;
column-gap: 50px;
}
#p11
{
column-gap: 50px;
}
</style>
</head>
<body>
<div id="mainDIV1">
<p id="p11">
<u
style="color: green;
font-size: 20px;">
Blog Elfan
</u>
<br>
Sistem operasi merupakan
perangkat lunak yang berfungsi
sebagai perangkat perantara
antara manusia dan komputer
atau perangkat keras. Tujuan
dari pengembangan sistem
operasi adalah menyediakan
lingkungan dimana penggunakan
dapat melakukan eksekusi
program secara efektif dan
efisien. Sistem operasi
merupakan perangkat lunak yang
mengatur cara kerja dari
perangkat keras komputer.
</p>
</div>
<br>
<input
type="button"
onclick="mainFunction()"
value="Submit" />
<script>
function mainFunction()
{
// Pengaturan columnCount.
document.getElementById(
"mainDIV1").style.columnCount = "4";
}
</script>
</body>
</html>
Output:Blog Elfan
Sistem operasi merupakan perangkat lunak yang berfungsi sebagai perangkat perantara antara manusia dan komputer atau perangkat keras. Tujuan dari pengembangan sistem operasi adalah menyediakan lingkungan dimana penggunakan dapat melakukan eksekusi program secara efektif dan efisien. Sistem operasi merupakan perangkat lunak yang mengatur cara kerja dari perangkat keras komputer.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style columnCount DOM
</title>
<style>
#mainDIV2
{
width: 350px;
height: 50%;
border: 2px solid green;
padding: 10px;
}
#p12
{
column-gap: 50px;
}
</style>
</head>
<body>
<div id="mainDIV2">
<p id="p12">
<u
style="color: green;
font-size: 20px;">
Blog Elfan
</u>
<br>
Sistem operasi merupakan
sistem yang bertindak sebagai
perangkat perantara yang
menghubungkan antara pengguna
dan perangkat keras. Tujuan
dari pengembangan sistem
operasi adalah menyediakan
lingkungan yang dapat
digunakan oleh pengguna untuk
mengeksekusi program secara
efektif dan efisien.
</p>
</div>
<br>
<input
type="button"
onclick="mainFunction()"
value="Submit" />
<script>
function mainFunction()
{
document.getElementById(
"mainDIV2").style.columnWidth = "100px";
// Pengaturan columnCount.
document.getElementById(
"mainDIV2").style.columnCount = "auto";
}
</script>
</body>
</html>
Output:Blog Elfan
Sistem operasi merupakan sistem yang bertindak sebagai perangkat perantara yang menghubungkan antara pengguna dan perangkat keras. Tujuan dari pengembangan sistem operasi adalah menyediakan lingkungan yang dapat digunakan oleh pengguna untuk mengeksekusi program secara efektif dan efisien.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style columnCount DOM
</title>
<style>
#mainDIV3
{
width: 350px;
height: 50%;
border: 2px solid green;
padding: 10px;
column-count: 4;
}
#p13
{
column-gap: 50px;
}
</style>
</head>
<body>
<div id="mainDIV3">
<p id="p13">
<u
style="color: green;
font-size: 20px;">
Blog Elfan
</u>
<br>
Sistem operasi merupakan
sistem yang bertindak sebagai
perangkat perantara yang
digunakan untuk menghubungkan
para pengguna dan perangkat
keras atau komputer. Tujuan
dari pengembangan sistem
operasi adalah menyediakan
lingkungan yang nyaman bagi
pengguna untuk melakukan
eksekusi program secara
efektif dan efisien.
</p>
</div>
<br>
<input
type="button"
onclick="mainFunction()"
value="Submit" />
<script>
function mainFunction()
{
// Pengaturan columnCount.
document.getElementById(
"mainDIV3").style.columnCount = "initial";
}
</script>
</body>
</html>
Output:Blog Elfan
Sistem operasi merupakan sistem yang bertindak sebagai perangkat perantara yang digunakan untuk menghubungkan para pengguna dan perangkat keras atau komputer. Tujuan dari pengembangan sistem operasi adalah menyediakan lingkungan yang nyaman bagi pengguna untuk melakukan eksekusi program secara efektif dan efisien.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style columnCount DOM
HTML
</title>
<style>
#mainDIV4
{
width: 350px;
height: 50%;
border: 2px solid green;
padding: 10px;
}
#p14
{
column-gap: 50px;
column-count: 4;
}
</style>
</head>
<body>
<div id="mainDIV4">
<p id="p14">
<u
style="color: green;
font-size: 20px;">
Blog Elfan
</u>
<br>
Sistem operasi berfungsi
sebagai sistem perantara yang
digunakan oleh pengguna dan
komputer untuk berkomunikasi.
Tujuan dari pengembangan
sistem operasi adalah untuk
membuktikan lingkungan dimana
penggunakan dapat mengeksekusi
program secara efektif dan
efisien.
</p>
</div>
<br>
<input
type="button"
onclick="mainFunction()"
value="Submit" />
<script>
function mainFunction()
{
// Pengaturan columnCount.
document.getElementById(
"p14").style.columnCount = "inherit";
}
</script>
</body>
</html>
Output:Blog Elfan
Sistem operasi berfungsi sebagai sistem perantara yang digunakan oleh pengguna dan komputer untuk berkomunikasi. Tujuan dari pengembangan sistem operasi adalah untuk membuktikan lingkungan dimana penggunakan dapat mengeksekusi program secara efektif dan efisien.
Catatan: gunakan MozColumnRule untuk browser Mozilla Firefox.
- 12 Value Properti columnRuleStyle DOM pada HTML [klik]
- 6 Value Properti columnRuleWidth Style DOM pada HTML [klik]
- 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]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti columnCount Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti columnCount Style DOM pada HTML:
Hapus1. Google Chrome
2. Edge
3. Firefox
4. Opera
5. Safari
Apa yang dimaksud dengan properti columnCount Style DOM pada HTML?
BalasHapusProperti columnCount Style DOM pada HTML digunakan untuk menentukan jumlah kolom yang harus dibagi menjadi beberapa elemen.
HapusProperti columnCount Style DOM HTML digunakan untuk mengatur atau menentukan nilai jumlah kolom yang akan dibagi pada suatu elemen pada dokumen HTML.
Hapus