Bisakah saya menggunakan mesin pemilih seperti sizzle untuk membandingkan pemilih css?

Inilah masalah saya: Saya sedang menulis plugin WordPress yang membantu penulis CSS pemula melihat bagaimana css diterapkan pada tema mereka secara real time. Ada sejumlah fitur bagus, kecuali satu, yang menurut saya cukup penting.

Saya ingin mengizinkan mereka mengklik sebuah elemen, melihat jalur pemilih lengkap ke elemen tersebut (bagian itu sudah selesai), dan kemudian menunjukkan kepada mereka gaya mana di lembar gaya yang berlaku untuk elemen tersebut.

Saya memiliki jalur pemilih lengkap ke elemen (html body div#page div#post-18.post h2.posttitle, misalnya), dan stylesheet saya diurai menjadi penyeleksi individual - tetapi saya tidak tahu cara apa pun untuk melakukannya bandingkan keduanya. Beberapa ide yang saya punya:

  1. Gunakan jQuery, dan jalankan setiap pemilih (di stylesheet) untuk melihat apa yang dikembalikannya. Saya tidak tergila-gila dengan hal ini karena sepertinya ini merupakan hambatan kinerja yang sangat besar untuk memeriksa (berpotensi ribuan) penyeleksi terhadap DOM penuh. Selain itu, saya kemudian harus membandingkan objek jQuery untuk melihat apakah objek tersebut menunjuk pada hal yang sama - dan berdasarkan apa yang saya baca tentang membandingkan objek, saya tidak yakin itu akan mudah. Taman.

  2. Tulis fungsi perbandingan sederhana saya sendiri, dan bandingkan jalur pemilih lengkap dengan pemilih css. Saya cukup tertarik dengan hal ini, sampai saya mulai memikirkan tentang berbagai penyeleksi tingkat lanjut - : > dll.

  3. Gunakan sizzle (atau serupa), atau gunakan implementasi desis jQuery untuk sekadar membandingkan pemilih. Mereka menjalankan penyeleksi ini terhadap DOM, jadi tentunya mereka memiliki kemampuan untuk membandingkan string pemilih saja? Bagaimanapun?

Aku terjebak. Bantuan apa pun sangat dihargai.


person Peter    schedule 29.10.2010    source sumber


Jawaban (1)


Memeriksa kesetaraan dalam struktur kompleks tersebut (seperti CSS) sangatlah sulit (misalnya, Anda tidak dapat menentukannya dengan menguji kumpulan hasil yang sama, karena mereka dapat berperilaku sangat berbeda dalam keadaan lain). Anda mungkin dapat mengetahuinya menggunakan API khusus browser jika tersedia dalam JavaScript (misalnya Firebug menampilkan stylesheet yang memengaruhi elemen yang dipilih). Selain itu, pendekatan pertama Anda adalah satu-satunya pendekatan AFAIK yang mungkin.

person jwueller    schedule 29.10.2010