Come cambiare CSS usando jQuery?

Sto provando a cambiare il 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>

Cosa mi sto perdendo qui?

Ignora le persone che suggeriscono che il nome della proprietà è il problema. La documentazione dell'API jQuery afferma esplicitamente che entrambe le notazioni sono accettabili: http://api.jquery.com/css/

Il vero problema è che manca una parentesi graffa di chiusura su questa linea:

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

Modificalo in questo:

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

Ecco una demo funzionante: 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>

Puoi fare:

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

O:

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

Per chiarire un po 'le cose, poiché alcune delle risposte forniscono informazioni errate:

Il metodo jQuery .css () consente l'uso della notazione DOM o CSS in molti casi. Quindi, entrambi backgroundColorebackground-color finiranno il lavoro.

Inoltre, quando chiami .css() con argomenti hai due scelte su quali possono essere gli argomenti. Possono essere 2 stringhe separate da virgola che rappresentano una proprietà css e il suo valore, oppure può essere un oggetto Javascript contenente una o più coppie di valori-chiave di proprietà e valori CSS.

In conclusione, l'unica cosa che non va nel tuo codice è che manca }. La riga dovrebbe contenere:

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

Non puoi lasciare fuori le parentesi graffe, ma puoi lasciare le virgolette da backgroundColore intorno color. Se si utilizza background-colorè necessario inserire virgolette intorno a causa del trattino.

In generale, è una buona abitudine citare i tuoi oggetti Javascript, poiché possono sorgere problemi se non si cita una parola chiave esistente .

Un'ultima nota è quella relativa al metodo jQuery .ready ()

$(handler);

è sinonimo di:

$(document).ready(handler);

nonché con un terzo modulo non raccomandato.

Ciò significa che $(init)è completamente corretto, poiché initè il gestore in quell'istanza. Quindi, initverrà attivato quando viene costruito il DOM.

Quando si utilizza la proprietà Multiple css con jQuery, è necessario utilizzare la parentesi graffa all'inizio e alla fine. Ti manca la parentesi graffa finale.

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

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

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

Puoi dare un'occhiata a questo tutorial Selettore CSS di jQuery .

Il .css()metodo semplifica la ricerca e l'impostazione delle proprietà CSS e, combinato con altri metodi come .animate (), consente di creare effetti interessanti sul sito.

Nella sua forma più semplice, il .css()metodo può impostare una singola proprietà CSS per un particolare set di elementi corrispondenti. Basta passare la proprietà e il valore come stringhe e le proprietà CSS dell'elemento vengono modificate.

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

Ciò imposterebbe la proprietà 'background-color' su 'red' per qualsiasi elemento che avesse la classe di 'esempio'.

Ma non ti limiti a cambiare solo una proprietà alla volta. Certo, potresti aggiungere un sacco di oggetti jQuery identici, ognuno modificando solo una proprietà alla volta, ma questo sta facendo diverse chiamate non necessarie al DOM ed è un sacco di codice ripetuto.

Al contrario, è possibile passare al .css()metodo un oggetto Javascript che contiene proprietà e valori come coppie chiave / valore. In questo modo, ciascuna proprietà verrà quindi impostata sull'oggetto jQuery contemporaneamente.

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

Questo cambierà tutte queste proprietà CSS sugli elementi '.example'.

Volevo solo aggiungere che quando si utilizzano i numeri per i valori con il metodo css è necessario aggiungerli all'esterno dell'apostrofo e quindi aggiungere l' unità CSS negli apostrofi.

$('.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 "," padding ":" 8px "});

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

manca "}" dopowhite"

cambiarlo in questo

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