Why Doesn't My jQuery CSS Modification Work?

Changing CSS Using jQuery

While attempting to modify CSS with jQuery, you may encounter difficulties. Let's troubleshoot a common issue.

Problem:

$(init);

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

Despite following the correct syntax, the code fails to function.

Answer:

The error stems from a missing closing curly brace in the $("#myParagraph").css() line. The correct code should be:

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

This modification results in a working JavaScript function that successfully modifies the CSS elements. To clarify, both CSS property name notations, "backgroundColor" and "background-color," are valid in jQuery. The jQuery API documentation confirms this.

Here's a live demo: http://jsfiddle.net/YPYz8/

Complete Working Code:

$(init);

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

This code snippet demonstrates how to change the background color of the h1 element to yellow, the background color of the element with the ID "myParagraph" to black, and the color of the text in that element to white. Additionally, it adds a 1px black border to all elements with the class "bordered."

The above is the detailed content of Why Doesn't My jQuery CSS Modification Work?. For more information, please follow other related articles on the PHP Chinese website!