Wie ändere ich CSS mit jQuery?

Ich versuche, das CSS mit jQuery zu ändern:

$(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>

Was fehlt mir hier?

Ignorieren Sie die Personen, die vorschlagen, dass der Name der Eigenschaft das Problem ist. In der jQuery-API-Dokumentation wird ausdrücklich angegeben, dass eine der beiden Notationen akzeptabel ist: http://api.jquery.com/css/

Das eigentliche Problem ist, dass Ihnen in dieser Zeile eine schließende geschweifte Klammer fehlt:

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

Ändern Sie es in dieses:

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

Hier ist eine funktionierende Demo: 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>

Sie können entweder:

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

Oder:

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

Um die Dinge ein wenig aufzuklären, da einige der Antworten falsche Informationen enthalten:

Die Methode jQuery .css () ermöglicht in vielen Fällen die Verwendung der DOM- oder CSS-Notation. Also beide backgroundColorundbackground-color wird die Arbeit erledigen.

Zusätzlich, wenn Sie anrufen .css() mit Argumenten , haben Sie außerdem zwei Möglichkeiten, wie die Argumente lauten können. Dies können entweder zwei durch Kommas getrennte Zeichenfolgen sein, die eine CSS-Eigenschaft und ihren Wert darstellen, oder es kann sich um ein Javascript-Objekt handeln, das ein oder mehrere Schlüsselwertpaare von CSS-Eigenschaften und -Werten enthält.

Zusammenfassend ist das einzige, was an Ihrem Code falsch ist, ein Fehlen }. Die Zeile sollte lauten:

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

Sie können die geschweiften Klammern nicht weglassen, aber Sie können die Anführungszeichen um backgroundColorund herum weglassen color. Wenn Sie verwenden background-color, müssen Sie wegen des Bindestrichs Anführungszeichen setzen.

Im Allgemeinen ist es eine gute Angewohnheit, Ihre Javascript-Objekte zu zitieren, da Probleme auftreten können, wenn Sie kein vorhandenes Schlüsselwort zitieren .

Ein letzter Hinweis betrifft die Methode jQuery .ready ()

$(handler);

ist gleichbedeutend mit:

$(document).ready(handler);

sowie mit einem dritten nicht empfohlenen Formular.

Dies bedeutet, dass dies $(init)völlig korrekt ist, da dies initin diesem Fall der Handler ist. So initwird gefeuert werden , wenn das DOM aufgebaut ist.

Wenn Sie mit jQuery die Eigenschaft Multiple css verwenden, müssen Sie am Anfang und am Ende die geschweifte Klammer verwenden. Ihnen fehlt die abschließende geschweifte Klammer.

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

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

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

Sie können sich dieses Tutorial zu jQuery CSS Selector ansehen .

Die .css()Methode macht es sehr einfach, CSS-Eigenschaften zu finden und festzulegen. In Kombination mit anderen Methoden wie .animate () können Sie einige coole Effekte auf Ihrer Site erzielen.

In ihrer einfachsten Form kann die .css()Methode eine einzelne CSS-Eigenschaft für einen bestimmten Satz übereinstimmender Elemente festlegen. Sie übergeben nur die Eigenschaft und den Wert als Zeichenfolgen, und die CSS-Eigenschaften des Elements werden geändert.

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

Dies würde die Eigenschaft 'Hintergrundfarbe' für jedes Element mit der Klasse 'Beispiel' auf 'Rot' setzen.

Sie können jedoch nicht nur jeweils eine Eigenschaft ändern. Sicher, Sie könnten eine Reihe identischer jQuery-Objekte hinzufügen, von denen jedes jeweils nur eine Eigenschaft ändert. Dies führt jedoch zu mehreren unnötigen Aufrufen des DOM und zu viel wiederholtem Code.

Stattdessen können Sie der .css()Methode ein Javascript-Objekt übergeben, das die Eigenschaften und Werte als Schlüssel / Wert-Paare enthält. Auf diese Weise wird dann jede Eigenschaft auf einmal für das jQuery-Objekt festgelegt.

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

Dadurch werden alle diese CSS-Eigenschaften für die '.example'-Elemente geändert.

Ich wollte nur hinzufügen, dass Sie bei der Verwendung von Zahlen für Werte mit der CSS-Methode diese außerhalb des Apostrophs hinzufügen und dann die CSS- Einheit in Apostrophen hinzufügen müssen .

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

oder

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 ({"Hintergrundfarbe": "- Webkit-Lineargradient (# e9e9e9, rgba (255, 255, 255, 0.43137254901960786), # e9e9e9)", "Farbe": "# 454545 "," padding ":" 8px "});

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

es fehlt "}"danachwhite"

ändere es in dieses

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