Menggabungkan Kolom HTML Menggunakan columnSpan Style DOM
 |
| Ilustrasi columnSpan Style DOM |
- berfungsi untuk mengembalikan nilai properti columnSpan: object.style.columnSpan
- berfungsi untuk menentukan nilai properti columnSpan: object.style.columnSpan = "1|all|initial|inherit"
Property Values:
- 1: merupakan nilai default dari properti elemen, yang digunakan untuk melakukan span elemen untuk satu kolom.
- all: digunakan untuk melakukan span elemen semua kolom.
- initial: digunakan untuk mengatur properti ke nilai default.
- inherit: digunakan untuk menerima nilai properti dari elemen parent.
Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti columnSpan dari suatu elemen.
Contoh: digunakan untuk mengatur properti columnSpan ke tipe "all".
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style columnSpan DOM
</title>
<style>
#main1
{
column-count: 3;
/* Sintak Standar */
}
</style>
</head>
<body>
<center>
<h1
style="color:green;">
Blog Elfan
</h1>
<h3>
Properti Style columnSpan DOM
</h3>
<button
onclick="bons1()">
Click
</button>
<div id="main1">
<h2 id="h2tag">
Blog TIK.
</h2>
Merupakan portal ilmu komputer
yang digunakan untuk
mempelajari berbagai ilmu
pemrograman dan materi TIK
lainnya yang sedang populer
saat ini.
</div>
<script>
function bons1()
{
// Kode program untuk browser
// lama Chrome, Safari, dan
// Opera
document.getElementById("h2tag").style.WebkitColumnSpan =
"all";
// Kode standar untuk jenis
// browser lainnya.
document.getElementById("h2tag").style.columnSpan = "all";
}
</script>
</center>
</body>
</html>
Output:Blog Elfan
Properti Style columnSpan DOM
Blog TIK.
Merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu pemrograman dan materi TIK lainnya yang sedang populer saat ini.Contoh: digunakan untuk mengatur nilai properti columnSpan ke tipe "all".
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style columnSpan DOM
</title>
<style>
#main2
{
column-count: 3;
/* Sintak Standar */
border: 2px solid green;
}
#h2tag
{
background-color: orange;
color: lime;
}
</style>
</head>
<body>
<center>
<h1
style="color:green;">
Blog Elfan
</h1>
<h3>
Properti Style columnSpan DOM
</h3>
<button
onclick="bons2s()">
Click
</button>
<br>
<div id="main2">
<h2 id="h2tag">
Blog TIK.
</h2>
Merupakan portal ilmu komputer
yang digunakan untuk
mempelajari berbagai ilmu
pemrograman dan materi TIK
lainnya yang sedang populer
saat ini.
</div>
<script>
function bons2s()
{
// Kode program untuk browser
// lama Chrome, Safari, dan
// Opera
document.getElementById("h2tag").style.WebkitColumnSpan
= "all";
// Kode program untuk jenis
// browser lainnya.
document.getElementById("h2tag").style.columnSpan
= "all";
}
</script>
</center>
</body>
</html>
Output:Blog Elfan
Properti Style columnSpan DOM
Blog TIK.
Merupakan portal ilmu komputer yang digunakan untuk mempelajari berbagai ilmu pemrograman dan materi TIK lainnya yang sedang populer saat ini.- 22 Value Properti Display Style DOM pada HTML [klik]
- 4 Value Properti emptyCells Style DOM pada HTML [klik]
- 16 Value Properti Filter Style DOM pada HTML [klik]
- 4 Value Properti Flex Style DOM pada HTML [klik]
- 4 Value Properti flexBasis Style DOM pada HTML [klik]
- 6 Value Properti flexDirection Style DOM pada HTML [klik]
- 4 Contoh Properti flexFlow Style DOM pada HTML [klik]
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti columnSpan Style DOM pada HTML?
BalasHapusBerikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti columnSpan Style DOM pada HTML:
Hapus1. Google Chrome 50.0
2. Internet Explorer 10.0
3. Opera 37.0
4. Safari 9.0
Apa yang dimaksud dengan properti columnSpan Style DOM pada HTML?
BalasHapusProperti columnSpan Style DOM pada HTML merupakan properti yang digunakan untuk menentukan berapa banyak kolom yang harus dibentangkan oleh suatu elemen pada dokumen HTML.
HapusProperti columnSpan Style DOM pada HTML merupakan properti yang digunakan untuk menentukan bagaimana sebuah elemen terbentang disepanjang kolom.
Hapus