css Metodu
css metodu, bir öğenin CSS stillerini almanıza
ve değiştirmenize olanak tanır.
Önemli olan, CSS stillerinde belirtilenlerden farklı
olabilen 'hesaplanmış değerleri' (computed style
properties) alacağımızı hatırlamaktır.
Sözdizimi
Tek bir özellik almak:
$(seçici).css(özellik);
Birden fazla özellik almak, iletilen parametre özellik adlarının bir dizisidir:
$(seçici).css(['width', 'height', 'color']);
Tek bir özelliği değiştirmek:
$(seçici).css(özellik, yeni değer);
Özellikleri, 'anahtar: değer' çiftlerini içeren bir nesne
olarak ileterek birden fazla özelliği değiştirelim.
Özellik adı CamelCase olarak belirtilir:
$(seçici).css({fontSize: '12px', color: 'red'});
Veya alternatif bir seçenek:
<p class="www">metin</p>
$('.www').css({'font-size':'12px', 'color':'red'});
Ayrıca, belirli bir işlevi kümedeki her öğeye
uygulayabiliriz. Bu durumda işlev, ilk parametre olarak
kümedeki dizin numarasını, ikinci parametre olarak ise
belirli öğe için belirtilen css özelliğinin mevcut değerini
alacaktır. Bu durumda işlev içindeki this
mevcut öğeyi gösterecektir.
Her öğenin CSS özelliği, işlevin o öğe için döndürdüğü
değerle değiştirilecektir:
$(seçici).css(özellik adı, function(kümedeki dizin, css özelliğinin mevcut değeri));
Örnek
www sınıfına sahip tüm öğeleri alalım
ve renklerini kırmızı olarak değiştirelim:
<p class="www">metin</p>
$('.www').css('color', 'red');
Örnek
www sınıfına sahip tüm öğeleri alalım
ve renklerini kırmızı, yazı tipi boyutunu ise
20px olarak değiştirelim:
<p class="www">metin</p>
$('.www').css({color:'red', fontSize:'20px'});
Veya alternatif bir seçenek:
<p class="www">metin</p>
$('.www').css({'color':'red', 'font-size':'20px'});
