Wie ändert man CSS mit jQuery?

111

Ich versuche, die CSS mit jQuery zu ändern:Wie ändert man CSS mit jQuery?

fehlt

$(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 soll ich hier?

Quelle

2010-09-16 user449914

ist irgendetwas davon zu arbeiten? Kannst du den HTML-Code posten? – webdad3

es wurde behoben. Wie unten beantwortet, gibt es zwei Lösungen: (1) entfernen Sie die geschweifte Klammer und ändern Sie Hintergrundfarbe in Hintergrundfarbe (CSS-Klasse) oder - das Kernproblem) setzen Sie die fehlende geschweifte Klammer am Ende und verwenden Sie auch die DOM/JS-Notation funktioniert. DANKE ALLE! – user449914

Manipulation von CSS in Javascript kann als schlechte Praxis angesehen werden. Betrachten Sie add/remove/toggling-Klassen. – Austin

können Sie tun entweder:

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

Oder:

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

Quelle

2010-09-16 19:30:37 Sarfraz

'{" backgroundColor ":" yellow "}' ist gültig, obwohl überflüssig. – Tgr

@tgr: Warum ist es überflüssig? – user449914

@Tgr: Sie haben Recht, gab nur eine zusätzliche Möglichkeit :) – Sarfraz

169

die Menschen ignorieren, die darauf hindeutet, daß der Name der Eigenschaft ist die Frage. Die jQuery API ausdrücklich, dass entweder Notation akzeptabel ist: http://api.jquery.com/css/

Das eigentliche Problem ist, dass Sie auf dieser Linie eine enge geschweifte Klammer fehlen:

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

ändert es dazu:

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

Hier ist eine funktionierende Demo: http://jsfiddle.net/YPYz8/

Quelle

2010-09-16 19:39:53 Ender

Um die Dinge ein wenig zu klären, da einige der Antworten incor bieten rect Informationen:

Die jQuery .css() Verfahren ermöglicht die Verwendung von entweder DOM oder CSS-Notation in vielen Fällen. Also, sowohl backgroundColor als auch background-color werden die Arbeit erledigen.

Darüber hinaus, wenn Sie .css() mit Argumenten aufrufen, haben Sie zwei Möglichkeiten, was die Argumente sein können. Sie können entweder 2 durch Kommas getrennte Strings sein, die eine css-Eigenschaft und ihren Wert darstellen, oder sie können ein JavaScript-Objekt sein, das ein oder mehrere Schlüsselwertpaare von CSS-Eigenschaften und -Werten enthält.

Abschließend ist das einzige, was mit Ihrem Code falsch ist eine fehlende }. Die Zeile sollte lauten:

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

Sie nicht die geschweiften Klammern auslassen können, aber Sie können die Zitate aus der Umgebung von backgroundColor und color verlassen. Wenn Sie background-color verwenden, müssen Sie wegen des Bindestrichs in Anführungszeichen setzen.

Im Allgemeinen ist es eine gute Angewohnheit, Ihre Javascript-Objekte zu zitieren, since problems can arise if you do not quote an existing keyword.

Eine letzte Bemerkung ist, dass über die jQuery .ready() Methode

$(handler);

ist auch mit:

$(document).ready(handler);

sowie mit einer dritten nicht empfohlen Form.

Das bedeutet, dass $(init) vollständig korrekt ist, da init der Handler in diesem Fall ist. So wird init ausgelöst, wenn das DOM erstellt wird.

Quelle

2010-09-16 20:10:43

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

seine fehlende "}" nach white"

Änderung es zu diesem

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

Quelle

2014-03-01 13:22:03 galexy

Sie haben nur die beliebteste Antwort nur 3 1/2 Jahre später wiederholt. –

Wenn Sie mehrere CSS-Eigenschaft mit jQuery verwenden, dann müssen Sie die geschweifte Klammer in Start verwenden und am Ende. Sie verpassen 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 diese jQuery CSS Selector tutorial ansehen.

Quelle

2014-07-30 16:58:42 Sadi

Ich wollte nur hinzufügen, dass wenn Sie Zahlen für Werte mit der CSS-Methode verwenden müssen Sie sie außerhalb des Apostrophs hinzufügen und fügen Sie dann die CSS Einheit in Apostrophe.

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

oder

var $block = $('.block')  

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

Quelle

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>

Quelle

2017-03-17 05:40:28

Wie ändert man CSS mit jQuery?

Antwort

Verwandte Themen