Mendapatkan Nama Class HTML Menggunakan classList DOM
Sintak: const elementClasses = elementNodeReference.classList;
- add(class1, class2, …): menambahkan satu buah class pada elemen. Jika class-nya sudah ada pada atribut elemen class, maka penambahan tersebut akan diabaikan.
- remove(class1, class2, …): menghapus class spesifik pada elemen. Dimana class yang tidak terdapat pada elemen akan dihilangkan tidak dianggap sebagai error.
- contains(class): berfungsi untuk memeriksa apakah value class spesifik sudah atau atau belum pada suatu elemen atribut class, yang akan mengembalikan hasil berupa nilai Boolean TRUE atau FALSE.
- item(index): berfungsi untuk mengembalikan nilai class berdasarkan nilai indeks dalam koleksi class. Jika nilai indeks yang diberikan berada diluar jangkauan nilai, maka akan mengembalikan nilai null.
- toggle(class, force): Toggle diantara nama class untuk suatu elemen.
Parameter pertama menghapus class spesifik dari elemen dan akan mengembalikan nilai FALSE. Jika nilai class tersebut tidak ada, maka akan dilakukan penambahan class ke elemen, dan akan mengembalikan nilai TRUE.
Parameter opsional kedua adalah sebuah nilai Boolean yang akan memaksa class untuk ditambahkan atau dihapus pada elemen. Ketika sebuah parameter kedua ditampilkan dan dievaluasi untuk bernilai TRUE, maka akan ditambahkan value class spesifik, jika tidak maka akan dievaluasi sebagai nilai FALSE, yang akan memaksa untuk dilakukan penghapusan class spesifik meskipun class tersebut sudah tersedia ataupun tidak.
<!DOCTYPE html>
<html>
<head>
<title>
Properti classList DOM HTML
</title>
<style>
.mystyle
{
align: center;
border: 1px solid black;
height: 100px;
padding-top: 35px;
background: lightgreen;
color: Black;
font-size: 70px;
}
</style>
</head>
<body>
<p>
Klik tombol untuk melihat
penambahan dan penghapusan
class "mystyle" DIV.
</p>
<button onclick="myFunction()">
Add class
</button>
<div id="myDIV">
Blog Elfan
</div>
<script>
function myFunction()
{
document.getElementById(
"myDIV").classList.add("mystyle");
}
function Remove()
{
document.getElementById(
"myDIV").classList.remove("mystyle");
}
</script>
<button onclick="Remove()">
Remove class
</button>
</body>
</html>
Klik tombol untuk melihat penambahan dan penghapusan class "mystyle" DIV.
Contoh: Toggling diantara class.
<!DOCTYPE html>
<html>
<head>
<title>
Properti classList DOM HTML
</title>
<style>
.mystyle
{
align: center;
border: 1px solid black;
height: 100px;
padding-top: 35px;
background: lightgreen;
color: Black;
font-size: 70px;}
.newClassName
{
align: center;
border: 1px solid black;
height: 50px;
padding-top: 35px;
background: green;
color: white;
font-size: 50px;}
</style>
</head>
<body>
<p>
Klik tombol untuk melihat
penambahan dan pengurangan
class "mystyle" DIV.
</p>
<button onclick="myFunction()">
toggle
</button>
<div
id="myDIV"
class="mystyle">
Blog Elfan
</div>
<script>
function myFunction()
{
document.getElementById(
"myDIV").classList.toggle("newClassName");
}
</script>
</body>
</html>
Klik tombol untuk melihat penambahan dan pengurangan class "mystyle" DIV.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti classList DOM HTML
</title>
<style>
.mystyle
{
width: 500px;
height: 50px;}
.anotherClass
{
background-color: lightGreen;}
.thirdClass
{
text-align: center;
font-size: 25px;
color: black;
margin-bottom: 10px;}
</style>
</head>
<body>
<div
id="myDIV"
class="mystyle anotherClass thirdClass">
Blog Elfan
</div>
<button
onclick="myFunction()">
Klik untuk menghitung class
</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x = document.getElementById(
"myDIV").classList.length;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
- Cara Penggunaan Properti clientTop DOM pada HTML
- Cara Penggunaan Properti clientWidth DOM pada HTML
- 2 Contoh Penggunaan Method cloneNode() DOM pada HTML
- 2 Contoh Penggunaan Method compareDocumentPosition() DOM pada HTML
- Cara Penggunaan Method contains() DOM pada HTML
- Cara Penggunaan Properti dir DOM pada HTML
- Cara Penggunaan Method exitFullscreen() DOM pada HTML
5 komentar untuk "Mendapatkan Nama Class HTML Menggunakan classList DOM"
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 -
Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti classList DOM pada HTML?
BalasHapusBerikut adalah jenis browser yang dapat digunakan untuk mengaktifkan properti classList DOM pada HTML:
Hapus1. Google Chrome 8.0
2. Internet Explorer 10.0
3. Firefox 3.6
4. Opera 11.5
5. Safari 5.1
Apa yang dimaksud dengan properti classList DOM pada HTML?
BalasHapusProperti classList DOM pada HTML berfungsi untuk mengembalikan nama kelas CSS dari suatu elemen tertentu. Properti classList mengembalikan object DOMTokenList. Properti classList bersifat read-only, tetapi dapat dilakukan penambahan atau penghapusan class CSS dengan menggunakan method add() atau remove().
HapusclassList merupakan properti read-only yang berfungsi untuk mengembalikan koleksi DOMTokenList secara langsung dari atribut class elemen. Properti classList kemudian dapat digunakan untuk memanipulasi daftar class. Penggunaan properti classList merupakan bentuk alternatif yang mudah untuk mengakses daftar class elemen sebagai string yang dibatasi spasi melalui elemen.
Hapus