Home » Jquery » How to define multiple CSS attributes in JQuery?

How to define multiple CSS attributes in JQuery?

Posted by: admin November 2, 2017 Leave a comment

Questions:

Is there any syntactical way in JQuery to define multiple CSS attributes without stringing everything out to the right like this:

$("#message").css("width", "550px").css("height", "300px").css("font-size", "8pt");

If you have, say, 20 of these your code will become hard to read, any solutions?

From jQuery API, for example, jQuery understands and returns the correct value for both

.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) 

and

.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }).

Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they’re required due to the hyphen in the name. – zanetu S

Answers:

better to just use .addClass even if you have 1 or more. More maintainable and readable.

If you really have the urge to do multiple css props then use

NB Any css props with a hyphen need to be quoted.

.css({
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
});

I’ve placed the quotes so no one will need to clarify that, and the code will be 100% functional.

Questions:
Answers:

pass it a json object:

$(....).css({
    'property': 'value', 
    'property': 'value'
});

http://docs.jquery.com/CSS/css#properties

Questions:
Answers:
$('#message').css({ width: 550, height: 300, 'font-size': '8pt' });

Questions:
Answers:

Using a plain object, you can pair up strings that represent property names with their corresponding values. Changing the background color, and making text bolder, for instance would look like this:

$("#message").css({
    "background-color": "#0F0", 
    "font-weight"     : "bolder"
});

Alternatively, you can use the JavaScript property names too:

$("#message").css({
    backgroundColor: "rgb(128, 115, 94)",
    fontWeight     : "700"
});

More information can be found in jQuery’s documentation.

Questions:
Answers:

please try this,

$(document).ready(function(){
    $('#message').css({"color":"red","font-family":"verdana"});
})

Questions:
Answers:

You can also use attr along with style:

$('#message').attr("style", "width:550; height:300; font-size:8px" );

Questions:
Answers:

Agree with redsquare however it is worth mentioning that if you have a two word property like text-align you would do this:

$("#message").css({ width: '30px', height: '10px', 'text-align': 'center'});

Questions:
Answers:

Try this

$(element).css({
    "propertyName1":"propertyValue1",
    "propertyName2":"propertyValue2"
})

Questions:
Answers:

You Can Try This

$("p:first").css("background-color", "#B2E0FF").css("border", "3px solid red");

Questions:
Answers:
$("#message").css({"width" : "550px", "height" : "300px", "font-size" : "8pt"});

Also, it may be better to use jQuery’s built in addClass to make your project more scalable.

Source: How To: jQuery Add CSS and Remove CSS