Comment changer CSS en utilisant jQuery?

J'essaye de changer le CSS en utilisant 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>

Qu'est-ce que j'oublie ici?

Ignorez les personnes qui suggèrent que le nom de la propriété est le problème. La documentation de l'API jQuery indique explicitement que l'une ou l'autre notation est acceptable: http://api.jquery.com/css/

Le problème réel est qu'il vous manque une accolade fermante sur cette ligne:

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

Changez-le en ceci:

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

Voici une démo fonctionnelle: 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>

Vous pouvez faire soit:

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

Ou:

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

Pour clarifier un peu les choses, car certaines des réponses fournissent des informations incorrectes:

La méthode jQuery .css () permet l'utilisation de la notation DOM ou CSS dans de nombreux cas. Donc, les deux backgroundColoret background-colorferont le travail.

De plus, lorsque vous appelez .css()avec des arguments, vous avez deux choix quant à ce que les arguments peuvent être. Il peut s'agir de 2 chaînes séparées par des virgules représentant une propriété css et sa valeur, ou il peut s'agir d'un objet Javascript contenant une ou plusieurs paires clé / valeur de propriétés et valeurs CSS.

En conclusion, le seul problème avec votre code est un fichier manquant }. La ligne doit lire:

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

Vous ne pouvez pas laisser les accolades, mais vous pouvez laisser les guillemets autour backgroundColoret color. Si vous utilisez, background-colorvous devez mettre des guillemets autour de celui-ci à cause du trait d'union.

En général, c'est une bonne habitude de citer vos objets Javascript, car des problèmes peuvent survenir si vous ne citez pas un mot-clé existant .

Une note finale est celle de la méthode jQuery .ready ()

$(handler);

est synonyme de:

$(document).ready(handler);

ainsi qu'avec une troisième forme non recommandée.

Cela signifie que $(init)c'est tout à fait correct, puisque initc'est le gestionnaire dans cette instance. Donc, initsera déclenché lors de la construction du DOM.

Lorsque vous utilisez la propriété Multiple css avec jQuery, vous devez utiliser l'accolade bouclée au début et à la fin. Il vous manque l'accolade de fin.

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

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

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

Vous pouvez jeter un œil à ce didacticiel jQuery CSS Selector .

La .css()méthode facilite la recherche et la définition des propriétés CSS et, combinée à d'autres méthodes telles que .animate (), vous pouvez créer des effets sympas sur votre site.

Dans sa forme la plus simple, la .css()méthode peut définir une seule propriété CSS pour un ensemble particulier d'éléments correspondants. Vous passez simplement la propriété et la valeur sous forme de chaînes et les propriétés CSS de l'élément sont modifiées.

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

Cela définirait la propriété 'background-color' sur 'red' pour tout élément ayant la classe 'example'.

Mais vous n'êtes pas limité à changer une propriété à la fois. Bien sûr, vous pouvez ajouter un tas d'objets jQuery identiques, chacun ne changeant qu'une propriété à la fois, mais cela fait plusieurs appels inutiles au DOM et c'est beaucoup de code répété.

Au lieu de cela, vous pouvez transmettre à la .css()méthode un objet Javascript qui contient les propriétés et les valeurs sous forme de paires clé / valeur. De cette façon, chaque propriété sera ensuite définie sur l'objet jQuery en une seule fois.

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

Cela changera toutes ces propriétés CSS sur les éléments '.example'.

Je voulais juste ajouter que lorsque vous utilisez des nombres pour des valeurs avec la méthode css, vous devez les ajouter en dehors de l'apostrophe, puis ajouter l' unité CSS dans les apostrophes.

$('.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 "});

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

il manque "}"aprèswhite"

changez-le en ceci

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