Changing CSS Styles in jQuery

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:

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:

$('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:

 
$('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:

$('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:

$('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():

var div = $('div').first();
var newWidth=div.width()+150;
div.width(newWidth);
var newHeight = div.height()+50;
div.height(newHeight);