Lompat ke konten Lompat ke sidebar Lompat ke footer

Menghitung Kolom HTML Menggunakan columnCount Style DOM

Properti Style columnCount DOM pada HTML digunakan untuk menentukan sebuah angka yang mendefinisikan angka dari kolom elemen yang harus dibagi.


Sebelum memahami lebih dalam materi tentang Menghitung Kolom HTML Menggunakan columnCount Style DOM, terlebih dahulu pelajari materi tentang: Pengaturan Warna Teks HTML Menggunakan Color Style DOM [klik], Clip Style HTML DOM dan Fungsinya [klik], dan Melakukan Pembersihan Efek HTML Menggunakan Clear Style DOM [klik].

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

Baca Juga:

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

<

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

<

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

<

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

<

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.

Artikel ini didedikasikan kepada: Noventi Siti Nur Aisa Putri, Novita Ayu Damayanti, Novita Laylatul Cholifah, Nufal Mubarok, dan Nur Salisa Qurrota A'Yun.

5 komentar untuk "Menghitung Kolom HTML Menggunakan columnCount Style DOM"

  1. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti columnCount Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti columnCount Style DOM pada HTML:
      1. Google Chrome
      2. Edge
      3. Firefox
      4. Opera
      5. Safari

      Hapus
  2. Apa yang dimaksud dengan properti columnCount Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti columnCount Style DOM pada HTML digunakan untuk menentukan jumlah kolom yang harus dibagi menjadi beberapa elemen.

      Hapus
    2. Properti columnCount Style DOM HTML digunakan untuk mengatur atau menentukan nilai jumlah kolom yang akan dibagi pada suatu elemen pada dokumen HTML.

      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 -