The css() method is used to get and set the value of a particular CSS property. It returns the value of that CSS property for the first element that the selector matches.

To get a CSS value use:

Syntax
css(‘propertyName’)

To set a CSS value use:

Syntax
css(‘propertyName’, ‘value’)

For example to change the text colour of a <p> element of class “firstpara” we could use:

jQuery

$("p.firstpara").css('color','#f00');

JSFIDDLE Demo

Setting more than one property

When setting more than one CSS property, they are placed inside the curly braces with the property and value separated by a : colon.

Syntax
css({‘propertyName’:’value’,’anotherPropety’:’someValue’})

Effectively we are using the Javascript object name/value format.

jQuery

$("p.firstpara").css({'color':'#f00','text-indent: '25px'});

JSFIDDLE Demo

Properties with dashes

You will have noticed the use of quotes around the properties and values. In the case of properties this is only really necessary when the property name has dashes in it such as background-color or text-indent for example:

jQuery

$("p.firstpara").css({color:'#f00','text-indent': '25px'});

However you can drop the quotes as long as you use camel casing for the properties with dashes ie:

jQuery

$("p.firstpara").css({color:'#f00', textIndent: '25px'});

JSFIDDLE Demo

Tip: It is generally a good idea to place quotes around your values as they are often strings such as ’25px’, ‘#ffffff’ and ‘hidden’.

Revealing Box Example

In following example there is a HTML <div> element of ID ‘infopanel’. The design calls for this to be of a set height of 110px but with the option to show additional content. As the amount of content may vary we first need to find the height of ‘infopanel’ as it would be normally. This is done with the help of the CSS method.

jQuery

var maxHeight = $("#infopanel").css('height');

The CSS method returns the height of the ‘infopanel’ and we store that in a variable called ‘maxHeight’.

We then set the ‘infopanel’ to the desired height of 110px and use the CSS overflow property set to ‘hidden’ to hide content over that height.

jQuery

$("#infopanel").css({'height':'110px','overflow':'hidden'});

The document has some HTML in with a class of ‘moreless’ that we will use to trigger the opening and closing of this panel. Using a variable to track whether the panel is ‘on’ or ‘off’ we can then respond differently to expand/contract the panel.

When the text of class ‘moreless’ is clicked the animate() method is used to set the ‘infopanel’ to the appropriate height – using our ‘maxHeight’ variable to expand, and 110px to contract. We could also use the jQuery text() method to change the text in the ‘moreless’ container to reflect whether clicking will show fewer or more details.

The resulting code in full would be:

jQuery

$(document).ready(function() {
	var maxHeight = $("#infopanel").css('height'); 
	var panelOn = false;
	$("#infopanel").css({'height':'110px','overflow':'hidden'});	
	$(".moreless").on('click', function(){;
		if(panelOn){
			$("#infopanel").animate({height:"110px"});
			$(this).find('strong').text('+ More Details');
			panelOn = false;
		}else{
			$("#infopanel").animate({height:maxHeight});
			$(this).find('strong').text('- Fewer Details');	
			panelOn = true;	
		}
	});
});

Leave a Comment