jQuery css() Metodu
Lisans:
Creative Commons
26.11.2020
tarihinde güncellendi
Bakabileceğiniz Etiketler:
Eğitmen:
Geleceği Yazanlar Ekibi
css() metodu seçilen elemanlar için bir ya da daha fazla stil özelliğine erişir ya da bunlar üzerinde değişiklik yapar.
Bir CSS özelliğine erişmek
Belirli bir CSS özelliğine erişmek için aşağıdaki yazılış biçimini kullanınız:
css("özellik adı");
Aşağıdaki Örnekte ilk uyuşan elemanın zemin rengi gönderilmektedir:
$("p").css("background-color");
Bir CSS özelliği atamak
Bir CSS özelliği atamak için aşağıdaki syntax kullanılır:
css("özellikadı","deger");
Aşağıdaki örnek bütün uyuşum sağlayan elemanların (paragraflar) zemin rengini değiştiriyo:
$("p").css("background-color","pink");
Öğrendiklerimizi aşağıdaki kod bloğu içinde kullanalım:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","pink");
});
});
</script>
</head>
<body>
<h2>BASLIK</h2>
<p style="background-color:#ff0000">BIRINCI SATIR</p>
<p style="background-color:#00ff00">IKINCI SATIR</p>
<p style="background-color:#0000ff">UCUNCU SATIR</p>
<p>SON SATIR</p>
<button>p YE ZEMIN RENGI ATA</button>
</body>
</html>
Burada, p YE ZEMIN RENGI ATA düğmesine tıklanınca bütün paragrafların zemin rengi pembe olacaktır.
Çoklu CSS Özelliği Atama
Aynı anda birden çok CSS özelliği atamak için aşağıdaki syntax kullanınız:
css({"özellikadı":"deger","ozellikadi":"deger",...});
Aşağıdaki örnekte tüm uyuşum sağlayan elemanların zemin rengi ve font büyüklüğü değiştirilmektedir:
$("p").css({"background-color":"pink","font-size":"150%"});
Çoklu özellik atamaya dair örnek HTML5 kodunu dikkatle inceleyelim:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"pink","font-size":"170%"});
});
});
</script>
</head>
<body>
<h2>PABLO PICASSO</h2>
<p style="background-color:#ff0000">JOAN MIRO</p>
<p style="background-color:#00ff00">FIKRET MUALLA</p>
<p style="background-color:#0000ff">MATISSE</p>
<p>KANDINSKI</p>
<button>p ELEMANLARINA COKLU ATAMA</button>
</body>
</html>
Burada p ELEMANLARINA COKLU ATAMA düğmesini tıklarsanız, tüm paragrafların (<p>) zemin rengi ve yazı puntolarının değiştiğini göreceksiniz.
