Warum funktioniert meine jQuery-CSS-Änderung nicht?

CSS mit jQuery ändern

Beim Versuch, CSS mit jQuery zu ändern, können Schwierigkeiten auftreten. Lassen Sie uns ein häufiges Problem beheben.

Problem:

$(init);

function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({"backgroundColor":"black","color":"white");
    $(".bordered").css("border", "1px solid black");
}

Obwohl die richtige Syntax befolgt wird, funktioniert der Code nicht.

Antwort:

Der Fehler ist auf eine fehlende schließende geschweifte Klammer zurückzuführen $("#myParagraph").css() Zeile. Der richtige Code sollte sein:

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

Diese Änderung führt zu einer funktionierenden JavaScript-Funktion, die die CSS-Elemente erfolgreich ändert. Zur Verdeutlichung: Beide Notationen von CSS-Eigenschaftsnamen, „backgroundColor“ und „background-color“, sind in jQuery gültig. Die jQuery-API-Dokumentation bestätigt dies.

Hier ist eine Live-Demo: http://jsfiddle.net/YPYz8/

Vollständiger Arbeitscode:

$(init);

function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({"backgroundColor": "black", "color": "white"});
    $(".bordered").css("border", "1px solid black");
}

Dieser Codeausschnitt zeigt, wie man die Hintergrundfarbe des h1-Elements in Gelb ändert, die Hintergrundfarbe des Elements mit der ID „myParagraph“ auf Schwarz und die Farbe des Texts in diesem Element auf Weiß. Darüber hinaus wird allen Elementen mit der Klasse „bordered“ ein 1 Pixel großer schwarzer Rand hinzugefügt.

Das obige ist der detaillierte Inhalt vonWarum funktioniert meine jQuery-CSS-Änderung nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!