JQuery kullanarak CSS nasıl değiştirilir?

JQuery kullanarak CSS'yi değiştirmeye çalışıyorum:

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({"backgroundColor":"black","color":"white");
    $(".bordered").css("border", "1px solid black");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

Burada neyi özlüyorum?

Konunun mülk adıyla ilgili olduğunu öne süren kişileri görmezden gelin. JQuery API belgeleri, her iki gösterimin de kabul edilebilir olduğunu açıkça belirtir: http://api.jquery.com/css/

Asıl sorun, bu satırda kapanış küme ayracının eksik olmasıdır:

$("#myParagraph").css({"backgroundColor":"black","color":"white");

Şununla değiştirin:

$("#myParagraph").css({"backgroundColor": "black", "color": "white"});

İşte çalışan bir demo: http://jsfiddle.net/YPYz8/

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({ "backgroundColor": "black", "color": "white" });
    $(".bordered").css("border", "1px solid black");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="bordered">
    <h1>Header</h1>
    <p id="myParagraph">This is some paragraph text</p>
</div>

Aşağıdakilerden birini yapabilirsiniz:

$("h1").css("background-color", "yellow");

Veya:

$("h1").css({backgroundColor: "yellow"});

Bazı cevaplar yanlış bilgi verdiğinden işleri biraz açıklığa kavuşturmak için:

JQuery .css () yöntemi, birçok durumda DOM veya CSS gösteriminin kullanılmasına izin verir. Yani, ikisi de backgroundColorve background-colorişi halledecek.

Ek olarak, .css()argümanlarla aradığınızda, argümanların ne olabileceğine dair iki seçeneğiniz vardır. Bir css özelliğini ve değerini temsil eden virgülle ayrılmış 2 dize olabilirler veya CSS özelliklerinin ve değerlerinin bir veya daha fazla anahtar değer çiftini içeren bir Javascript nesnesi olabilirler.

Sonuç olarak, kodunuzda yanlış olan tek şey eksiktir }. Satır şöyle olmalıdır:

$("#myParagraph").css({"backgroundColor":"black","color":"white"});

Sen süslü parantez bırakamayız ama yerinden dışarı tırnak bırakabilir backgroundColorve color. Eğer kullanırsanız background-color, tire nedeniyle etrafına tırnak işareti koymalısınız.

Genel olarak, Javascript nesnelerinizden alıntı yapmak iyi bir alışkanlıktır, çünkü mevcut bir anahtar kelimeden alıntı yapmazsanız sorunlar ortaya çıkabilir .

Son bir not, jQuery hakkında .ready () yöntemi hakkındadır.

$(handler);

olduğunu eşanlamlı ile:

$(document).ready(handler);

yanı sıra üçüncü bir tavsiye edilmeyen form ile.

Bu $(init), tam olarak doğru olduğu anlamına gelir , çünkü inito durumda işleyici budur. Yani, initDOM inşa edildiğinde ateşlenecek.

JQuery ile Çoklu css özelliğini kullandığınızda, başlangıçta ve sonunda küme ayracı kullanmalısınız. Son küme ayracı eksik.

function init() {
 $("h1").css("backgroundColor", "yellow");

 $("#myParagraph").css({"background-color":"black","color":"white"});

 $(".bordered").css("border", "1px solid black");
}

Bu jQuery CSS Seçici öğreticisine bir göz atabilirsiniz .

.css()Yöntem süper basit bulmak ve set CSS özellikleri ve .animate gibi diğer yöntemlerle (kombine), sitenizde biraz serin etkileri yapabilir hale getirir.

En basit şekliyle .css()yöntem, belirli bir eşleşen öğeler kümesi için tek bir CSS özelliği ayarlayabilir. Yalnızca dizeler olarak özelliği ve değeri iletirsiniz ve öğenin CSS özellikleri değiştirilir.

$('.example').css('background-color', 'red');

Bu, "örnek" sınıfına sahip herhangi bir öğe için "arka plan rengi" özelliğini "kırmızı" olarak ayarlar.

Ancak bir seferde yalnızca bir mülkü değiştirmekle sınırlı değilsiniz. Elbette, her biri bir seferde yalnızca bir özelliği değiştiren bir dizi özdeş jQuery nesnesi ekleyebilirsiniz, ancak bu, DOM'a birkaç, gereksiz çağrı yapar ve çok sayıda tekrarlanan koddur.

Bunun yerine, .css()yönteme, özellikleri ve değerleri anahtar / değer çiftleri olarak içeren bir Javascript nesnesi iletebilirsiniz . Bu şekilde, her bir özellik jQuery nesnesi üzerinde aynı anda ayarlanacaktır.

$('.example').css({
    'background-color': 'red',
    'border' : '1px solid red',
    'color' : 'white',
    'font-size': '32px',
    'text-align' : 'center',
    'display' : 'inline-block'
});

Bu, '.example' öğelerindeki tüm bu CSS özelliklerini değiştirecektir.

Sadece css yöntemiyle değerler için sayılar kullanırken bunları kesme işaretinin dışında eklemeniz ve ardından CSS birimini kesme işaretlerine eklemeniz gerektiğini eklemek istedim .

$('.block').css('width',50 + '%');

veya

var $block = $('.block')    

$block.css({ 'width': 50 + '%', 'height': 4 + 'em', 'background': '#FFDAB9' });

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
      $( document ).ready(function() {
         $('h1').css('color','#3498db');
      });
    </script>
    <style>
      .wrapper{
        height:450px;
        background:#ededed;
        text-align:center
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <h1>Title</h1>
    </div>
  </body>
</html>

$ (". radioValue"). css ({"background-color": "- webkit-linear-gradient (# e9e9e9, rgba (255, 255, 255, 0.43137254901960786), # e9e9e9)", "color": "# 454545 "," padding ":" 8px "});

Yanlış kod:$("#myParagraph").css({"backgroundColor":"black","color":"white");

"}"sonra kayıp white"

buna değiştir

 $("#myParagraph").css({"background-color":"black","color":"white"});