Without a doubt css() is one of the most used methods in the day to day work with jQuery. It is used to change and get the value of any css attribute.
We’re covering some of the most important jQuery methods related to cascading style sheets. The most important of these methods to work with CSS dynamically is precisely css() and although we have already been able to introduce it in previous articles, it is worth dedicating a little of our time to learn all its possibilities.
The css() method is used both to receive the value of a CSS attribute and to assign a new value to it, and its operation depends on the parameters that we can send to it. So, to talk about this method we will go through each of the possible parameter sets that we can send you, explaining each of the available options and offering several examples.
.css( css_property_name )
If we send a single parameter to the CSS method, we are indicating that we want to receive the value of a CSS property. In this case, the function will return the value of the CSS attribute that we have indicated.
If we have an element on the page like this, to which we have placed an identifier, attribute id=”mylayer”:
We can access some of its css properties as follows:
$(“#mylayer”).css(“color”);
This will return the “color” attribute of that element, which in this case was worth “color”.
As we can suppose, the CSS method sending a single parameter can be very useful to obtain data about the current styles of our elements, however, the following option is still more used, in which we send two parameters.
.css( css_property_name, value )
In this second case, apart from the name of a CSS property, we are sending a second parameter with a value and it will help us to assign a new status to said attribute. This second way of calling the CSS method also has some variants.
Change a single CSS attribute: We can send the name of a single CSS attribute and its new value.
$(“#mylayer”).css(“color”, “green”);
With this we would be changing the text color of the element with id=”mylayer” and assigning the green color (“green”).
Change several CSS attributes at the same time: We can send all the CSS attributes we want and their new values, in object notation. With this we achieve that, in a single call to css() several properties are changed at the same time.
$(“#mylayer”).css({
“background-color”: “#ff8800”,
“position”: “absolute”,
“width”: “100px”,
“top”: “100px”,
“left”: “200px”
})
As you can see, with the previous call to css() several CSS attributes would be updated, such as the background color, the position of the element, its width, etc.
On this point we are going to give an additional example that may be good to learn how to vary a CSS attribute taking into account the previous value it had.
$(“#mylayer”).mouseover(function(){
oldLeft = parseInt($(this).css(“left”));
//alert(oldLeft);
$(this).css(“left”, oldLeft + 10 + “px”);
})
With this we are defining an onmouseover event on the layer with id=”mylayer”, so these instructions will be executed when the mouse moves over the layer. Inside the method we are doing a couple of things. As a first step we are extracting the value of the “left” CSS property and converting it to an integer. As a second step we are updating that value of “left” and assigning a new value that would be 10 pixels more than the old value. To do this we add 10 to the old value of “left” and concatenate it with the unit of measure “px”.
Change a single attribute and set the value based on the result of a function: This third usage is a bit more advanced and is only available as of jQuery 1.4. It consists of sending a function as a second parameter, instead of the value directly, to assign the value returned by that function to the attribute.
This is as easy to set up as passing a function that just has a return. But there is a detail and that is that this function receives two values. The first is the index of the element within the jQuery object that receives the method and the second, more useful, is used to obtain the current value of the attribute that we want to change.
To see this use of the jQuery method we have prepared the following example.
$(“#mylayer”).click(function(){
$(this).css(“width”, function(index, value){
//alert(value);
var increase = prompt(“how much do you want to increase?”, “25”);
return (parseInt(value) + parseInt(increase)) + “px”;
});
})
As you can see, a click event is defined on a layer. We then use the css() method on the element to change the width attribute. The value of width that will be placed will be what the function indicated as the second parameter in the css() method returns. If you look closely, the function returns a value, which is what will be placed in the width attribute.
All the .
Facebook Comments
Disqus