Why are there times when you use a ',' vs ':' to separate .CSS parameters?
for example:
$('#example').css("",""); vs. $('#example').css("":"");
I have use in this way.
$('#example').css("color","#000000");
$('#example').css("cursor":"pointer");
6 Answers
The colon is only used when you have to specify multiple values. But then you have to put the values in brackets and curly brackets and separate them by a comma. For example:
$('#example').css({
'background-color' : 'yellow',
'font-weight' : 'bolder'
});
Otherwise, when you only need to set one value, you use the comma:
$('#example').css('background-color','yellow');
7 Comments
Felix Kling
That's actually a very imprecise answer. What do curly brackets mean?
T.J. Crowder
"The colon is only used when you have to specify multiple values." That's not true, you can use the object form even if you're only doing one. If you're only doing one, you have the option of the two-argument version of the function, but you're not required to use it.
メロディア
@FelixKling: curly brackets -> {
Felix Kling
I get that. But what is their meaning in JavaScript? Btw. it is a rhetorical question (I know what this syntax means), I wanted to encourage you to improve your answer. Right now it appears that curly brackets are something "magical" in the context of parameter passing, which is not true.
メロディア
@T.J.Crowder: you're right, i didn't say that you can't do it, but in my opinion, it's cleaner coding, because it's more defined if there are multiple or one value(s) to set.
|
The second way, in your second example, is a syntax error.
I think you meant:
$("#example").css({'cursor': 'pointer'});
They both have the same effect. The second way lets you set multiple properties with one call:
$('#example').css({
'cursor': 'pointer',
'font-size': '18px'
});
The ".css()" function just checks the arguments you pass it. If there are two arguments and they're both strings (or I guess if the second is a number), then it just sets a single property. If the first argument is an object, it looks at the properties of the object and treats them all as CSS properties to set.
edit — a thing to realize is that this has nothing in particular to do with the ".css()" function. The "{ }" notation is just basic JavaScript syntax for an object constant. Thus:
var someCSS = {
'cursor': 'pointer', 'font-size': '12px', 'border-width': '5px'
};
$('#example').css( someCSS );
has exactly the same effect as passing in the object directly as in the earlier examples.
2 Comments
user311166
thanks, yes i see the syntax error and apologize typing too fast. mostly wanted to know the difference between the two. i did read that the colon (:) is used to separate multiple class paramaters however when trying to use the following exapmple: $('#example').css({'cursor','pointer'}); it fails and forces me to use a colon (:) for example: $('#example').css({'cursor':'pointer'}); which made me think it was more than just mutliple paramenters. thoughts?
Felix Kling
@user311166: You should read about object literals. It's not at all related to functions.
The comma separates arguments in a function call:
$('#example').css("color","#000000");
"color" is one argument, "#000000" is another.
The colon notes key-value pairs in an object. Your second piece of code won't work; it should be:
$("#example").css({'cursor': 'pointer'});
Here you pass one argument to the function, which is an object. The object allows key-value pairs. In this case, this allows you to set multiple settings in one go:
$("#example").css({'cursor': 'pointer', 'color': '#000000'});
In this case, you have a Javascript object {'cursor': 'pointer', 'color': '#000000'} which has two key-value pairs. The relationship between key and value is denoted by the colon, while the pairs are separated by commas.
Comments
Using the : you would be able to set multiple properties like so:
$('#example').css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
Otherwise you can only do one property.
Comments
Well, in JQuery css() suports a multiple-words object or one attribute:
Using multiple-words:
.css({'background-color': '#ffe', 'border-left': '5px solid #ccc'})
it equal the:
.css({backgroundColor: '#ffe', borderLeft: '5px solid #ccc'})
Well... the ":" means that you are assigning the property. The two examples are compatible.
read this: Css() JQuery
Comments
In jQuery's .css(), you can either declare one property, or multiple properties, and it can take a JSON object or "property","value" for single properties.
So, you can use $('.example').css("border","1px solid black"); but for more than 1 property, you will use a JSON object, which is done by this format :
{
"border" : "1px solid black",
"padding" : "10px"
}
$('#example').css({"cursor":"pointer"});?