DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

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.

4 Value Properti columnCount Style DOM pada HTML
Ilustrasi columnCount DOM

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: 700px;

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: 700px;

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: 700px;

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: 700px;

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.

Komentar

  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

Posting Komentar

Hubungi admin melalui Wa : +62-896-2514-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 ~

Postingan populer dari blog ini (30 Hari)

Specifier %d dan %i Bahasa C dan Fungsinya

Enkapsulasi Java dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas