Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Menambah dan Mengalih Keluar Kelas daripada Elemen SVG Menggunakan jQuery?

Bagaimanakah Saya Boleh Menambah dan Mengalih Keluar Kelas daripada Elemen SVG Menggunakan jQuery?

Susan Sarandon
Lepaskan: 2024-12-21 02:39:09
asal
522 orang telah melayarinya

How Can I Add and Remove Classes from SVG Elements Using jQuery?

jQuery SVG: Menambah dan Mengalih Keluar Kelas

Walaupun mencipta elemen interaktif dengan jQuery SVG, pengguna kadangkala menghadapi kesukaran apabila cuba memanipulasi kelas. Isu yang timbul ialah ketidakupayaan untuk menambah atau mengalih keluar kelas daripada objek SVG.

Masalah:

Pemilih dan pengendali acara jQuery berfungsi dengan lancar dengan elemen SVG, membenarkan tindakan sedemikian sebagai memaparkan makluman pada klik. Walau bagaimanapun, percubaan untuk menggunakan kaedah addClass jQuery untuk menambah kelas kepada elemen yang sama terbukti tidak berjaya.

Penyelesaian:

Isu teras terletak pada ketidakupayaan jQuery untuk mengubah suai kelas secara langsung untuk Elemen SVG sebelum versi 3. Had ini memerlukan pendekatan alternatif untuk menambah dan mengalih keluar kelas:

Pendekatan Bergantung kepada jQuery:

Daripada menggunakan addClass dan removeClass, manfaatkan kaedah attr() jQuery untuk memanipulasi atribut kelas:

// Add a new class
$("#item").attr("class", "oldclass newclass");

// Remove a class
$("#item").attr("class", "oldclass");
Salin selepas log masuk

JavaScript tulen Pendekatan:

Jika anda memilih untuk tidak bergantung pada jQuery, anda boleh terus memanipulasi atribut kelas elemen menggunakan kaedah setAttribute JavaScript:

// Add a new class
var element = document.getElementById("item");
element.setAttribute("class", "oldclass newclass");

// Remove a class
element.setAttribute("class", "oldclass");
Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menambah dan Mengalih Keluar Kelas daripada Elemen SVG Menggunakan jQuery?. 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