Como mudar CSS usando jQuery?

Estou tentando alterar o CSS usando jQuery:

$(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>

O que estou perdendo aqui?

Ignore as pessoas que estão sugerindo que o nome da propriedade seja o problema. A documentação da API do jQuery afirma explicitamente que qualquer notação é aceitável: http://api.jquery.com/css/

O problema real é que você está perdendo uma chave de fechamento nesta linha:

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

Altere para este:

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

Aqui está uma demonstração de trabalho: 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>

Você pode:

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

Ou:

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

Para esclarecer um pouco as coisas, já que algumas das respostas estão fornecendo informações incorretas:

O método jQuery .css () permite o uso da notação DOM ou CSS em muitos casos. Então, ambos backgroundColore background-colorfarão o trabalho.

Além disso, quando você chama .css()com argumentos, você tem duas opções sobre quais podem ser os argumentos. Eles podem ser duas cadeias separadas por vírgula, representando uma propriedade css e seu valor, ou um objeto Javascript que contém um ou mais pares de valores-chave de propriedades e valores CSS.

Em conclusão, a única coisa errada com o seu código está faltando }. A linha deve ler:

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

Você não pode deixar os colchetes de fora, mas pode deixar as aspas por aí backgroundColore color. Se você usar, background-colordeverá colocar aspas ao redor por causa do hífen.

Em geral, é um bom hábito citar seus objetos Javascript, pois podem surgir problemas se você não citar uma palavra-chave existente .

Uma observação final é sobre o método jQuery .ready ()

$(handler);

é sinônimo de :

$(document).ready(handler);

bem como com um terceiro formulário não recomendado.

Isso significa que $(init)está completamente correto, já que inité o manipulador nessa instância. Então, initserá acionado quando o DOM for construído.

Quando você estiver usando a propriedade Multiple css com o jQuery, deverá usar o Brace curly no início e no final. Está faltando a chave de finalização.

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

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

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

Você pode dar uma olhada neste tutorial do jQuery CSS Selector .

O .css()método torna super simples encontrar e definir propriedades CSS e, combinado com outros métodos como .animate (), você pode criar alguns efeitos interessantes em seu site.

Na sua forma mais simples, o .css()método pode definir uma única propriedade CSS para um conjunto específico de elementos correspondentes. Você apenas passa a propriedade e o valor como strings e as propriedades CSS do elemento são alteradas.

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

Isso definiria a propriedade 'background-color' como 'red' para qualquer elemento que tivesse a classe 'example'.

Mas você não está limitado a mudar apenas uma propriedade de cada vez. Claro, você pode adicionar um monte de objetos jQuery idênticos, cada um alterando apenas uma propriedade de cada vez, mas isso faz várias chamadas desnecessárias ao DOM e é muito código repetido.

Em vez disso, você pode transmitir ao .css()método um objeto Javascript que contém as propriedades e os valores como pares chave / valor. Dessa forma, cada propriedade será configurada no objeto jQuery de uma só vez.

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

Isso mudará todas essas propriedades CSS nos elementos '.example'.

Só queria acrescentar que, ao usar números para valores com o método css, você deve adicioná-los fora do apóstrofo e, em seguida, adicionar a unidade CSS nos apóstrofos.

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

ou

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 "});

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

está faltando "}"depoiswhite"

mude para isso

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