Rumah > hujung hadapan web > tutorial js > Bagaimanakah Saya Boleh Menambah Kelas pada Elemen HTML Menggunakan JavaScript?

Bagaimanakah Saya Boleh Menambah Kelas pada Elemen HTML Menggunakan JavaScript?

Barbara Streisand
Lepaskan: 2024-12-18 22:23:09
asal
835 orang telah melayarinya

How Can I Add a Class to an HTML Element Using JavaScript?

Menambahkan Kelas pada Elemen Sedia Ada

Dalam HTML, kita boleh menetapkan kelas kepada elemen untuk digayakan dan mengenal pastinya menggunakan CSS. Kadangkala, kita perlu menambah kelas tambahan pada elemen sedia ada secara dinamik menggunakan JavaScript. Tutorial ini merangkumi dua kaedah untuk mencapai matlamat ini, memenuhi keperluan penyemak imbas moden dan lama.

Pelayar Moden (IE9 ):

Harta classList menyediakan cara yang mudah untuk memanipulasi kelas sesuatu unsur. Begini caranya untuk menambah kelas:

element.classList.add("my-class");
Salin selepas log masuk

Pelayar Warisan (IE8-):

Untuk penyemak imbas lama, kita perlu memanipulasi sifat className secara langsung. Walau bagaimanapun, kita perlu mempertimbangkan dengan teliti kelas sedia ada yang terdapat dalam elemen.

Langkah:

  1. Tetapkan ID kepada elemen untuk akses mudah dalam JavaScript.
  2. Gunakan kod JavaScript berikut untuk menambah kelas:
var d = document.getElementById("elementID");
d.className += " new-class";
Salin selepas log masuk

Pastikan untuk memasukkan ruang sebelum nama kelas baharu untuk mengelak daripada menulis ganti kelas sedia ada.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah Kelas pada Elemen HTML Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan