jQuery CSS İşlemleri - css() Yöntemi

jQuery CSS İşleme Kılavuzu

Örnek

<p> elementinin rengini ayarla:

$(".btn1").click(function(){
  $("p").css("color","red");
});

Kişisel olarak deneyin

Tanım ve Kullanım

css() yöntemi, eşleşen elementin bir veya daha fazla stil özelliğini ayarlar veya döndürür.

CSS Özellik Değeri Döndürür

İlk uydu elementin CSS özellik değerini döndürür.

Açıklama:Bir değer döndüğünde, kısaltılmış CSS özellikleri desteklenmez (örneğin "background" ve "border").

$(seçici).css(name)
Parametre Açıklama
name Gerekli. CSS özelliğinin adını belirler. Bu parametre herhangi bir CSS özelliğini içerebilir. Örneğin "color".

Örnek

İlk paragrafın color stil özelliği değerini almak için:

$("p").css("color");

Kişisel olarak deneyin

CSS Özelliği Ayarla

Tüm eşleşen elementlerin belirtilen CSS özelliğini ayarlayın.

$(seçici).css(name,value)
Parametre Açıklama
name Gerekli. CSS özelliğinin adını belirleyin. Bu parametre, "color" gibi herhangi bir CSS özelliğini içerebilir.
value

Seçmeli. CSS özelliğinin değerini belirleyin. Bu parametre, "red" gibi herhangi bir CSS özelliği değeri içerebilir.

Boş bir değer ayarlandıysa, belirtilen özelliği elementten kaldırır.

Örnek

Tüm paragrafların rengini kırmızıya ayarlayın:

$("p").css("color","red");

Kişisel olarak deneyin

CSS özelliklerini fonksiyon kullanarak ayarlayın

Tüm eşleşen elementlerin stil özelliklerinin değerini ayarlayın.

Bu fonksiyon, ayarlamak istediğiniz özelliğin değerini döndürür. İki parametre alır, index, nesne koleksiyonundaki elementin indeks konumudur, value, eski özellik değeridir.

$(seçici).css(name,function(index,value))
Parametre Açıklama
name Gerekli. CSS özelliğinin adını belirleyin. Bu parametre, "color" gibi herhangi bir CSS özelliğini içerebilir.
function(index,value)

CSS özelliğinin yeni değerini belirlemek için bir fonksiyon belirleyin.

  • index - Seçmeli. Seçicinin index konumunu kabul eder
  • oldvalue - Seçmeli. CSS özelliğinin mevcut değerini kabul eder.

Örnek 1

Tüm paragrafların rengini kırmızıya ayarlayın:

$("button").click(function(){
    $("p").css("color",function(){return "red";});
    });

Kişisel olarak deneyin

Örnek 2

div genişliğini kademeli olarak artırın:

$("div").click(function() {
  $("this").css(
    "width", function(index, value) {return parseFloat(value) * 1.2;}
  );
});

Kişisel olarak deneyin

Çoklu CSS özellik/değer çiftleri ayarlayın

$(seçici).css({property:value, property:value, ...})

Tüm eşleşen elementlerin stil özelliklerini "ad/değer çifti" nesnesi olarak ayarlayın.

Bu, tüm eşleşen elementler üzerinde çok sayıda stil özelliği ayarlamak için en iyi yoludur.

Parametre Açıklama
{property:value}

Gerekli. Stili ayarlamak için "ad/değer çifti" nesnesi belirtin.

Bu parametre, birkaç CSS özellik adı/değer çifti içerebilir. Örneğin {"color":"red","font-weight":"bold"}

Örnek

$("p").css({
  "color":"white",
  "background-color":"#98bf21",
  "font-family":"Arial",
  "font-size":"20px",
  "padding":"5px"
  });

Kişisel olarak deneyin

jQuery CSS İşleme Kılavuzu