¿Cómo cambiar CSS usando jQuery?

Estoy tratando de cambiar el 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>

¿Que me estoy perdiendo aqui?

Ignore a las personas que sugieren que el nombre de la propiedad es el problema. La documentación de la API jQuery declara explícitamente que cualquier notación es aceptable: http://api.jquery.com/css/

El problema real es que te falta una llave de cierre en esta línea:

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

Cámbialo a esto:

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

Aquí hay una demostración de trabajo: 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>

Puedes hacer cualquiera:

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

O:

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

Para aclarar un poco las cosas, ya que algunas de las respuestas proporcionan información incorrecta:

El método jQuery .css () permite el uso de notación DOM o CSS en muchos casos. Entonces, ambos backgroundColory background-colorharán el trabajo.

Además, cuando llama .css()con argumentos tiene dos opciones en cuanto a cuáles pueden ser los argumentos. Pueden ser 2 cadenas separadas por comas que representan una propiedad css y su valor, o puede ser un objeto Javascript que contiene uno o más pares de valores clave de propiedades y valores CSS.

En conclusión, lo único malo con su código es que falta }. La línea debería leer:

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

No puede omitir las llaves, pero puede omitir las comillas de alrededor backgroundColory color. Si usa background-colordebe poner comillas a su alrededor debido al guión.

En general, es un buen hábito citar sus objetos Javascript, ya que pueden surgir problemas si no cita una palabra clave existente .

Una nota final es sobre el método jQuery .ready ()

$(handler);

es sinónimo de:

$(document).ready(handler);

así como con un tercer formulario no recomendado.

Esto significa que $(init)es completamente correcto, ya que inites el controlador en esa instancia. Por lo tanto, initse disparará cuando se construya el DOM.

Cuando usa la propiedad Multiple CSS con jQuery, debe usar el Brace rizado al comienzo y al final. Te estás perdiendo la llave final.

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

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

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

Puedes echar un vistazo a este tutorial de jQuery CSS Selector .

El .css()método hace que sea muy simple encontrar y establecer propiedades CSS y, combinado con otros métodos como .animate (), puede hacer algunos efectos geniales en su sitio.

En su forma más simple, el .css()método puede establecer una sola propiedad CSS para un conjunto particular de elementos coincidentes. Simplemente pasa la propiedad y el valor como cadenas y las propiedades CSS del elemento cambian.

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

Esto establecería la propiedad 'background-color' en 'red' para cualquier elemento que tuviera la clase de 'ejemplo'.

Pero no está limitado a cambiar solo una propiedad a la vez. Claro, podría agregar un montón de objetos jQuery idénticos, cada uno cambiando solo una propiedad a la vez, pero esto está haciendo varias llamadas innecesarias al DOM y es un montón de código repetido.

En cambio, puede pasar el .css()método a un objeto Javascript que contiene las propiedades y valores como pares clave / valor. De esta manera, cada propiedad se establecerá en el objeto jQuery de una vez.

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

Esto cambiará todas estas propiedades CSS en los elementos '.example'.

Solo quería agregar eso cuando use números para valores con el método css, debe agregarlos fuera del apóstrofe y luego agregar la unidad CSS en apóstrofes.

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

o

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 "," relleno ":" 8px "});

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

falta "}"despuéswhite"

cámbialo a esto

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