web-dev-qa-db-fra.com

Comment changer les CSS en utilisant jQuery?

J'essaie 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?

javascriptjquerycss
123
user449914

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 de travail: 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>
192
Ender

Vous pouvez faire soit:

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

Ou:

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

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

La méthode jQuery . Css () permet dans de nombreux cas d'utiliser la notation DOM ou CSS. Donc, backgroundColor et background-color feront le travail.

De plus, lorsque vous appelez .css() avec des arguments, vous avez le choix entre deux arguments. Il peut s'agir de deux chaînes séparées par des virgules représentant une propriété css et sa valeur, ou d'un objet Javascript contenant une ou plusieurs paires de valeurs de clé de propriétés et de valeurs CSS.

En conclusion, la seule chose qui ne va pas dans votre code, c'est qu'il manque un }. La ligne devrait se lire:

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

Vous ne pouvez pas laisser les accolades, mais vous pouvez laisser les guillemets autour de backgroundColor et color. Si vous utilisez background-color, vous devez mettre des guillemets à 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 dernière note est celle de la méthode jQuery . Ready ()

$(handler);

est synonyme avec:

$(document).ready(handler);

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

Cela signifie que $(init) est tout à fait correct, car init est le gestionnaire dans cet exemple. Ainsi, init sera déclenché lors de la construction du DOM.

23
Peter Ajtai

Lorsque vous utilisez la propriété Multiple css avec jQuery, vous devez utiliser l'accolade curly au début et à la fin. Il vous manque la dernière accolade.

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

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

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

Vous pouvez consulter ceci tutoriel jQuery CSS Selector .

10
Sadi

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 le CSS nité dans les apostrophes.

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

ou

var $block = $('.block')    

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

La méthode .css() simplifie la recherche et la définition des propriétés CSS. 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 méthode .css() peut définir une seule propriété CSS pour un ensemble particulier d'éléments correspondants. Vous ne faites que transmettre 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 de la classe ‘example’.

Mais vous ne vous contentez pas de changer une propriété à la fois. Bien sûr, vous pouvez ajouter un ensemble d’objets jQuery identiques, chacun ne modifiant qu’une propriété à la fois, mais il s’agit de faire plusieurs appels inutiles au DOM et représente beaucoup de code répété.

À la place, vous pouvez transmettre à la méthode .css() un objet Javascript contenant 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 modifiera toutes ces propriétés CSS sur les éléments ‘.example’.

2
Johnny

$ (". radioValue"). css ({"background-color": "- webkit-linear-gradient (# e9e9e9, rgba (255, 255, 255, 0.43137254901960786), # e9e9e9)", "color": "# 454545 "," padding ":" 8px "});

1
Daooji katara
<!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>
1
Nikit Barochiya
$(function(){ 
$('.bordered').css({
"border":"1px solid #EFEFEF",
"margin":"0 auto",
"width":"80%"
});

$('h1').css({
"margin-left":"10px"
});

$('#myParagraph').css({
"margin-left":"10px",
"font-family":"sans-serif"
});

});
<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>
1
user8743488

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

son manquant "}" après white"

changez cela en ceci

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