Come cambiare CSS usando jQuery?

111

Sto cercando di cambiare il CSS utilizzando jQuery:Come cambiare 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>

Che cosa mi manca qui?

fonte

2010-09-16 user449914

è niente di tutto ciò funziona? Puoi pubblicare l'html? – webdad3

è stato corretto. Come spiegato di seguito, ci sono due soluzioni: (1) rimuovere la parentesi graffa e cambiare backgroundColor in background-color (classe css) o - il problema principale) mettere la brina riccia mancante alla fine e usare la notazione DOM/JS anche lavori. GRAZIE A TUTTI! – user449914

manipolare i CSS in javascript può essere considerato una cattiva pratica. Considera le classi aggiungi/rimuovi/attiva. – Austin

Si può fare sia:

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

Oppure:

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

fonte

2010-09-16 19:30:37 Sarfraz

'{" backgroundColor ":" yellow "}' è valido, anche se superfluo. – Tgr

@ tgr: perché è superfluo? – user449914

@Tgr: hai ragione, hai appena dato un'ulteriore possibilità :) – Sarfraz

169

ignorare le persone che stanno suggerendo che il nome della proprietà è il problema. L'API jQuery afferma esplicitamente che sia la notazione è accettabile: http://api.jquery.com/css/

Il vero problema è che si sta perdendo una stretta parentesi graffa su questa linea:

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

Change a questo:

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

Ecco una demo funzionante: http://jsfiddle.net/YPYz8/

fonte

2010-09-16 19:39:53 Ender

Per chiarire un po 'le cose, dal momento che alcune delle risposte stanno fornendo incor Informazioni rect:

Il jQuery metodo .css() consente l'utilizzo di entrambi i DOM o la notazione CSS in molti casi. Quindi, sia backgroundColor sia background-color completeranno il lavoro.

Inoltre, quando si chiama .css() con gli argomenti si hanno due scelte su cosa possono essere gli argomenti. Possono essere due stringhe separate da virgole che rappresentano una proprietà css e il suo valore, oppure può essere un oggetto Javascript che contiene una o più coppie di valori chiave di proprietà e valori CSS.

In conclusione l'unica cosa che non va con il tuo codice manca un }. La linea dovrebbe leggere:

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

Non si può lasciare le parentesi graffe, ma si può lasciare le virgolette fuori da tutto backgroundColor e color. Se si utilizza background-color, è necessario racchiuderlo tra virgolette a causa del trattino.

In generale, è una buona abitudine per citare i vostri oggetti JavaScript, since problems can arise if you do not quote an existing keyword.

Una nota finale è che circa il metodo di jQuery .ready()

$(handler);

è sinonimo con:

$(document).ready(handler);

nonché con una terza forma raccomandato.

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

fonte

2010-09-16 20:10:43

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

sua scomparsa "}" dopo white"

cambiamento a questa

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

fonte

2014-03-01 13:22:03 galexy

Hai appena ripetuto la risposta più popolare, solo 3 anni e mezzo dopo. –

Quando si utilizza proprietà multipla css con jQuery, allora è necessario utilizzare la parentesi graffa in partenza 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"); 
}

Si può avere uno sguardo a questo jQuery CSS Selector tutorial.

fonte

2014-07-30 16:58:42 Sadi

Volevo semplicemente 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 in in apostrofi.

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

var $block = $('.block')  

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

fonte

2016-04-04 23:50:08 lowtechsun

<!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>

fonte

2017-03-17 05:40:28

Come cambiare CSS usando jQuery?

risposta

Problemi correlati