Pseudo-sınıf kuralları JavaScript CSS ayarı

SORU

22 Kasım 2008, CUMARTESİ

Pseudo-sınıf kuralları JavaScript CSS ayarı

Bir pseudo-sınıf seçiciler CSS kurallarını değiştirmek için arıyorum (: link gibi :hover, vb.) JavaScript.

CSS kodunun bir analog: JS a:hover { color: red }.

Cevabı başka bir yerde bulamadım; eğer biri bu tarayıcılar desteklemez bir şey olduğunu biliyorsa, bu yararlı bir sonuç olurdu.

CEVAP

22 Kasım 2008, CUMARTESİ

Yapamazsın tarzı bir pseudo-sınıfı bir elemanı tek başına, aynı şekilde alamazsın bir pseudo-class stil="..." özniteliği (gibi, hiç seçici).

Kural ekleyerek örneğin stil değiştirerek bunu yapabilirsiniz:

#elid:hover { background: red; }

etkilemek istediğiniz her öğe varsayarak seçilmesi için izin vermek için benzersiz bir KİMLİĞİ vardır.

Teoride istediğiniz belge (önceden varolan gömülü veya bağlantılı bir Stil Verilmiş) gibi sözdizimini kullanarak anlamına gelir: http://www.w3.org/TR/DOM-Level-2-Style/Overview.html

document.styleSheets[0].insertRule('#elid:hover { background-color: red; }', 0);
document.styleSheets[0].cssRules[0].style.backgroundColor= 'red';

YANİ, tabii ki, kendi sözdizimi gerektirir:

document.styleSheets[0].addRule('#elid:hover', 'background-color: red', 0);
document.styleSheets[0].rules[0].style.backgroundColor= 'red';

Büyük ve küçük tarayıcılar ya da sözdizimi desteklemek için muhtemeldir. Dinamik stil haylazlığı oldukça can sıkıcı değil çünkü, nadiren, nadiren gerekir, ve tarihsel olarak sıkıntılı yapılır.

Bunu Paylaş: