jQuery ile CSS important
Merhaba !
CSS'te ki söz hiyerarşisi şu şekildedir. İlk öncelik, (varsa) inline css olarak yazılmış css kodundadır. Ardından css dosyamızdaki sınıf-id seçicilerindedir, son olarak tag'ların (div, p vb) css kodundadır.
Fakat !important diğer tüm kodları umursamayarak "benim söylediğim olacak" diyor. Peki !important özelliği olan css'i jQuery tarafında nasıl ezeriz?
Başlarken
Örnek olarak bir div açalım ve hem inline css olarak, hemde !important kodu içeren bir css kodu yazalım.
<div style="background-color: #ffeb3b !important">
jQuery kullanılarak ezilecek olan div
</div>css() fonksiyonu
Bu div'deki inline olarak yazılmış css kodunu style tag'ı içerisinde ezmemiz mümkün değildir. jQuery kullanarak inline css'i değiştirerek kodumuza söz geçirmem mümkündür; bunu aşağıdaki jQuery'in css() fonksiyonunun kullanımı ile başaramayız.
$("div").css("background-color", "#2196F3 !important");!important
css() fonksiyonunun ilk parametresine cssText yazarsak, ikinci parametre olarak css kodumuzu yazıp !important ekleyebiliriz. Bu kod inline olarak div'e yerleşecek ve tüm diğer kodları ezecektir.
$("div").css("cssText", "background-color: #03968A !important");