Getting a Style
To work with styles, the css(). To get the value of the desired property, we pass the name of the property as a parameter to this method:
1 | console.log($('body').css('font-size')); |
Style change
To change the style, first, we can pass the new property value as the second parameter to the css method:
1 | $('a').css('font-weight', 'bold'); |
Second, we can change the style with a function that is also passed as the second parameter of the css method. For example, let’s change the font color of the links:
1 2 3 4 5 6 | $('a').css('color', function(index, oldValue){ if(oldValue=='rgb(0, 0, 238)') {return 'red';} else {return 'green';} }); |
Depending on what was the old value of the element’s oldValue for this property, the function returns a new value for each element in the selection.
Third, we can pass in an array of properties to set:
1 | $('a').css({'color':'red', 'cursor':'pointer', 'font-size': '14px'}); |
Here, as a parameter, we pass a javascript object in which we set new values for the desired properties.
Sometimes it is necessary to increase or decrease properties relative to the current value by a certain amount. In this case, we can write like this:
1 | $('a').css({'font-size': '-=1', 'margin-left': '+=10'}); |
Setting Width and Height
Although we can manipulate properties through with the heights method, we can also use the methods of the same name width()and height():
1 2 3 4 5 | var div = $('div').first();var newWidth=div.width()+150;div.width(newWidth);var newHeight = div.height()+50;div.height(newHeight); |