« Previous | 1 | 2 | 3 | Next »

JQUERY - CSS SELECTOR METHODS

The jQuery library supports nearly all of the selectors included in Cascading Style Sheet (CSS) specifications 1 through 3, as outlined on the World Wide Web Consortium's site.

Using JQuery library developers can enhance their websites without worrying about browsers and their versions as long as the browsers have JavaScript enabled.

Most of the JQuery CSS Methods do not modify the content of the jQuery object and they are used to apply CSS properties on DOM elements.

Apply CSS Properties

This is very simple to apply any CSS property using JQuery method css( PropertyName, PropertyValue ). Here is the syntax for the method:

selector.css( PropertyName, PropertyValue );

Here you can pass PropertyName as a javascript string and based on its value,PropertyValue could be string or integer.

Example

Following is an example which adds font color to the second list item.

list item 1
list item 2
list item 3
list item 4
list item 5
list item 6

Apply Multiple CSS Properties

You can apply multiple CSS properties using a single JQuery method CSS( {key1:val1, key2:val2....). You can apply as many properties as you like in a single call. Here is the syntax for the method:

selector.css( {key1:val1, key2:val2....keyN:valN})

Here you can pass key as property and val as its value as described above.

Example

Following is an example which adds font color as well as background color to the second list item.

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("li").eq(2).css({"color":"red",
"background-color":"green"});
});
</script>
</head>
<body>
<div>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</body>
</html>

This will produce the the following result:

list item 1
list item 2
list item 3
list item 4
list item 5
list item 6

Setting Element Width & Height

The width( val ) and height( val ) method can be used to set the width and height respectively of any element.

Example

Following is a simple example which sets the width of first division element whereas rest of the elements have width set by style sheet:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div:first").width(100);
$("div:first").css("background-color", "blue");
});
</script>
<style>
div{ width:70px; height:50px; float:left; margin:5px;
background:red; cursor:pointer; }
</style>
</head>
<body>
<div></div>
<div>d</div>
<div>d</div>
<div>d</div>
<div>d</div>
</body>
</html>

JQuery CSS Methods

Following table lists down all the methods which you can use to play with CSS properties:

S.No.	Method & Description
1	css( name ) Return a style property on the first matched element.
2	css( name, value ) Set a single style property to a value on all matched elements.
3	css( properties ) Set a key/value object as style properties to all matched elements.
4	height( val ) Set the CSS height of every matched element.
5	height( ) Get the current computed, pixel, height of the first matched element.
6	innerHeight( ) Gets the inner height (excludes the border and includes the padding) for the first matched element.
7	innerWidth( ) Gets the inner width (excludes the border and includes the padding) for the first matched element.
8	offset( ) Get the current offset of the first matched element, in pixels, relative to the document.
9	offsetParent( ) Returns a jQuery collection with the positioned parent of the first matched element.
10	outerHeight( [margin] ) Gets the outer height (includes the border and padding by default) for the first matched element.
11	outerWidth( [margin] ) Get the outer width (includes the border and padding by default) for the first matched element.
12	position( ) Gets the top and left position of an element relative to its offset parent.
13	scrollLeft( val ) When a value is passed in, the scroll left offset is set to that value on all matched elements.
14	scrollLeft( ) Gets the scroll left offset of the first matched element.
15	scrollTop( val ) When a value is passed in, the scroll top offset is set to that value on all matched elements.
16	scrollTop( ) Gets the scroll top offset of the first matched element.
17	width( val ) Set the CSS width of every matched element.
18	width( ) Get the current computed, pixel, width of the first matched element.

Syntax

Here is the simple syntax to use this method:

selector.css( name )

Parameters

Here is the description of all the parameters used by this method:

name: The name of the property to access.

Example

Following is a simple example showing the usage of this method:

css( name, value ) Method

The css( name, value ) method sets a single style property to a value on all matched elements..

Syntax

Here is the simple syntax to use this method:

selector.css( name, value )

Parameters

Here is the description of all the parameters used by this method:

name: The name of the property to be set.
value: The value of the property.

Example

Following is a simple example showing the usage of this method:

css( properties ) Method

The css( properties ) method sets a key/value object as style properties to all matched elements.

Syntax

Here is the simple syntax to use this method:

selector.css( properties )

The above syntax can be written as follows:

selector.css( {key1:val1, key2:val2....keyN:valN})

Parameters

Here is the description of all the parameters used by this method:

properties: Key/value pairs to set as style properties.

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("That div is <span>" + color + "</span>.");
$("#result").css({'color': color,
'font-weight' : 'bold',
'background-color': 'gray'});
});
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
</head>
<body>
<p>Click on any square:</p>
<span id="result"> </span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
</body>
</html>

height( val ) Method

The height( val ) method sets the CSS height of every matched element.

Syntax

Here is the simple syntax to use this method:

selector.height( val )

Parameters

Here is the description of all the parameters used by this method:

val: This is height of the element. If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var color = $(this).css("background-color");
var height = $(this).height();
$("#result").html("That div is <span>" +color+ "</span>.");
$("#result").css({'color': color, 'background-color':'gray'});
$("#result").height( height );
});
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
</head>
<body>
<p>Click on any square:</p>
<span id="result"> </span>
<div style="background-color:blue; height:50px;"></div>
<div style="background-color:pink;height:30px;"></div>
<div style="background-color:#123456;height:100px;"></div>
<div style="background-color:#f11; height:75px;"></div>
</body>
</html>

height( ) Method

The height( ) method gets the current computed, pixel, height of the first matched element.

Syntax

Here is the simple syntax to use this method:

selector.height( )

This method is able to find the height of the window and document as follows:

$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document

Parameters

Here is the description of all the parameters used by this method:

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var color = $(this).css("background-color");
var height = $(this).height();
$("#result").html("That div is <span>" +color+ "</span>.");
$("#result").css({'color': color,
'background-color':'gray'});
$("#result").height( height );
});
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
</head>
<body>
<p>Click on any square:</p>
<span id="result"> </span>
<div style="background-color:blue; height:50px;"></div>
<div style="background-color:pink;height:30px;"></div>
<div style="background-color:#123456;height:100px;"></div>
<div style="background-color:#f11; height:75px;"></div>
</body>
</html>

innerHeight( ) Method

The innerHeight( ) method gets the inner height (excludes the border and includes the padding) for the first matched element.

Syntax

Here is the simple syntax to use this method:

selector.innerHeight( )

Parameters

Here is the description of all the parameters used by this method:

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var color = $(this).css("background-color");
var height = $(this).innerHeight();
$("#result").html("Inner Height is <span>" +
height + "</span>.");
$("#result").css({'color': color,
'background-color':'gray'});
$("#result").height( height );
});
});
</script>
<style>
#div1{ margin:10px;padding:12px;
border:2px solid #666;
width:60px;}
#div2 { margin:15px;padding:5px;
border:5px solid #666;
width:60px;}
#div3 { margin:20px;padding:4px;
border:4px solid #666;
width:60px;}
#div4 { margin:5px;padding:3px;
border:3px solid #666;
width:60px;}
</style>
</head>
<body>
<p>Click on any square:</p>
<span id="result"> </span>
<div id="div1" style="background-color:blue;"></div>
<div id="div2" style="background-color:pink;"></div>
<div id="div3" style="background-color:#123456;"></div>
<div id="div4" style="background-color:#f11;"></div>
</body>
</html>

innerWidth( ) Method

The innerWidth( ) method gets the inner width (excludes the border and includes the padding) for the first matched element.

Syntax

Here is the simple syntax to use this method:

selector.innerWidth( )

Parameters

Here is the description of all the parameters used by this method:

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var color = $(this).css("background-color");
var width = $(this).innerWidth();
$("#result").html("Inner Width is <span>" +
width + "</span>.");
$("#result").css({'color': color,
'background-color':'gray'});
});
});
</script>
<style>
#div1{ margin:10px;padding:12px;
border:2px solid #666;
width:60px;}
#div2 { margin:15px;padding:5px;;
border:5px solid #666;
width:60px;}
#div3 { margin:20px;padding:4px;
border:4px solid #666;
width:60px;}
#div4 { margin:5px;padding:3px;
border:3px solid #666;
width:60px;}
</style>
</head>
<body>
<p>Click on any square:</p>
<span id="result"> </span>
<div id="div1" style="background-color:blue;"></div>
<div id="div2" style="background-color:pink;"></div>
<div id="div3" style="background-color:#123456;"></div>
<div id="div4" style="background-color:#f11;"></div>
</body>
</html>

offset( ) Method

The offset( ) method gets the current offset of the first matched element, in pixels, relative to the document.

The returned object contains two Float properties, top and left. Browsers usually round these values to the nearest integer pixel for actual positioning. The method works only with visible elements.

Syntax

Here is the simple syntax to use this method:

selector.offset( )

Parameters

Here is the description of all the parameters used by this method:

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var offset = $(this).offset();
$("#lresult").html("left offset: <span>" +
offset.left + "</span>.");
$("#tresult").html("top offset: <span>" +
offset.top + "</span>.");
});
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
</head>
<body>
<p>Click on any square:</p>
<span id="lresult"> </span>
<span id="tresult"> </span>
<div style="background-color:blue;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
</body>
</html>

offsetParent( ) Method

The offsetParent( ) method returns a jQuery collection with the positioned parent of the first matched element.

This is the first parent of the element that has position (as in relative or absolute). This method only works with visible elements.

Syntax

Here is the simple syntax to use this method:

selector.offsetParent( )

Parameters

Here is the description of all the parameters used by this method:

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var offset = $(this).offsetParent();
$("#lresult").html("left offset: <span>" +
offset.offset().left + "</span>.");
$("#tresult").html("top offset: <span>" +
offset.offset().top + "</span>.");
});
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
</head>
<body>
<p>Click on any square:</p>
<span id="lresult"> </span>
<span id="tresult"> </span>
<div style="background-color:blue;">
<div style="background-color:pink;"></div>
</div>
<div style="background-color:#123456;">
<div style="background-color:#f11;"></div>
</div>
</body>
</html>

outerHeight( [margin] ) Method

The outerHeight( [margin] ) method gets the outer height (includes the border and padding by default) for the first matched element.

This method works for both visible and hidden elements. It is not supported for elements that are indirectly hidden by consequence of a parent being hidden.

Syntax

Here is the simple syntax to use this method:

selector.outerHeight( [margin] )

Parameters

Here is the description of all the parameters used by this method:

margin: This optional argument when set to true the margin of the element will be included in the calculations.

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var color = $(this).css("background-color");
var height = $(this).outerHeight();
$("#result").html("Outer Height is <span>" +
height + "</span>.");
$("#result").css({'color': color,
'background-color':'gray'});
$("#result").height( height );
});
});
</script>
<style>
#div1{ margin:10px;padding:12px;
border:2px solid #666;
width:60px;}
#div2 { margin:15px;padding:5px;
border:5px solid #666;
width:60px;}
#div3 { margin:20px;padding:4px;
border:4px solid #666;
width:60px;}
#div4 { margin:5px;padding:3px;
border:3px solid #666;
width:60px;}
</style>
</head>
<body>
<p>Click on any square:</p>
<span id="result"> </span>
<div id="div1" style="background-color:blue;"></div>
<div id="div2" style="background-color:pink;"></div>
<div id="div3" style="background-color:#123456;"></div>
<div id="div4" style="background-color:#f11;"></div>
</body>
</html>

outerWidth( [margin] ) Method

The outerWidth( [margin] ) method gets the outer width (includes the border and padding by default) for the first matched element.

This method works for both visible and hidden elements. It is not supported for elements that are indirectly hidden by consequence of a parent being hidden.

Syntax

Here is the simple syntax to use this method:

selector.outerWidth( [margin] )

Parameters

Here is the description of all the parameters used by this method:

margin: This optional argument when set to true, the margin of the element will be included in the calculations.

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var color = $(this).css("background-color");
var width = $(this).outerWidth( true );
$("#result").html("Outer Width is <span>" +
width + "</span>.");
$("#result").css({'color': color,
'background-color':'gray'});
});
});
</script>
<style>
#div1{ margin:10px;padding:12px;
border:2px solid #666;
width:60px;}
#div2 { margin:15px;padding:5px;
border:5px solid #666;
width:60px;}
#div3 { margin:20px;padding:4px;
border:4px solid #666;
width:60px;}
#div4 { margin:5px;padding:3px;
border:3px solid #666;
width:60px;}
</style>
</head>
<body>
<p>Click on any square:</p>
<span id="result"> </span>
<div id="div1" style="background-color:blue;"></div>
<div id="div2" style="background-color:pink;"></div>
<div id="div3" style="background-color:#123456;"></div>
<div id="div4" style="background-color:#f11;"></div>
</body>
</html>

position( ) Method

The position( ) method gets the top and left position of an element relative to its offset parent.

The returned object contains two integer properties, top and left. For accurate calculations make sure to use pixel values for margins, borders and padding. This method only works with visible elements.

Syntax

Here is the simple syntax to use this method:

selector.position( )

Parameters

Here is the description of all the parameters used by this method:

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var position = $(this).position();
$("#lresult").html("left position: <span>" +
position.left + "</span>.");
$("#tresult").html("top position: <span>" +
position.top + "</span>.");
});
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
</head>
<body>
<p>Click on any square:</p>
<span id="lresult"> </span>
<span id="tresult"> </span>
<div style="background-color:blue;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
</body>
</html>

scrollLeft( val ) Method

The scrollLeft( val ) method is used to set scroll left offset to the passed value on all matched elements. This method works for both visible and hidden elements.

Syntax

Here is the simple syntax to use this method:

selector.scrollLeft( val )

Parameters

Here is the description of all the parameters used by this method:

val: A positive number representing the desired scroll left offset.

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("div.demo").scrollLeft(300);
});
</script>
<style>
div.demo {
background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
p { margin:10px;
padding:5px;
border:2px solid #666;
width:1000px;
height:1000px;
}
</style>
</head>
<body>
<div class="demo"><p>Hello</p></div>
</body>
</html>

scrollLeft( ) Method

The scrollLeft( ) method gets the scroll left offset of the first matched element. This method works for both visible and hidden elements.

Syntax

Here is the simple syntax to use this method:

selector.scrollLeft( )

Parameters

Here is the description of all the parameters used by this method:

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("div.demo").scrollLeft( 200 );
$("div.demo").mousemove(function () {
var left = $("div.demo").scrollLeft();
$("#result").html("left offset: <span>" +
left + "</span>.");
});
});
</script>
<style>
div.demo {
background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
div.result{
margin:10px;
width:100px;
height:100px;
margin:5px;
float:left;
background-color:blue;
}
p { margin:10px;
padding:5px;
border:2px solid #666;
width:1000px;
height:1000px;
}
</style>
</head>
<body>
<div class="demo"><p>Hello</p></div>
<span>Scroll horizontal button to see the result:</span>
<div class="result"><span id="result"></span></div>
</body>
</html>

scrollTop( val ) Method

The scrollTop( val ) method is used to set scroll top offset to the passed value on all matched elements. This method works for both visble and hidden elements.

Syntax

Here is the simple syntax to use this method:

selector.scrollTop( val )

Parameters

Here is the description of all the parameters used by this method:

val: A positive number representing the desired scroll top offset.

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("div.demo").scrollTop(300);
});
</script>
<style>
div.demo {
background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
p { margin:10px;
padding:5px;
border:2px solid #666;
width:1000px;
height:1000px;
}
</style>
</head>
<body>
<div class="demo"><p>Hello</p></div>
</body>
</html>

scrollTop( ) Method

The scrollTop( ) method gets the scroll top offset of the first matched element. This method works for both visible and hidden elements.

Syntax

Here is the simple syntax to use this method:

selector.scrollTop( )

Parameters

Here is the description of all the parameters used by this method:

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("div.demo").scrollTop( 200 );
$("div.demo").mousemove(function () {
var top = $("div.demo").scrollTop();
$("#result").html("top offset: <span>" +
top + "</span>.");
});
});
</script>
<style>
div.demo {
background:#CCCCCC none repeat scroll 0 0;
border:3px solid #666666;
margin:5px;
padding:5px;
position:relative;
width:200px;
height:100px;
overflow:auto;
}
div.result{
margin:10px;
width:100px;
height:100px;
margin:5px;
float:left;
background-color:blue;
}
p { margin:10px;
padding:5px;
border:2px solid #666;
width:1000px;
height:1000px;
}
</style>
</head>
<body>
<div class="demo"><p>Hello</p></div>
<span>Scroll vertical button to see the result:</span>
<div class="result"><span id="result"></span></div>
</body>
</html>

width( val ) Method

The width( val ) method sets the CSS width of every matched element.

Syntax

Here is the simple syntax to use this method:

selector.width( val )

Parameters

Here is the description of all the parameters used by this method:

val: This is width of the element. If no explicit unit was specified (like 'em' or '%') then "px" is concatenated to the value.

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var color = $(this).css("background-color");
var width = $(this).height();
$("#result").html("That div is <span>" +color+ "</span>.");
$("#result").css({'color': color, 'background-color':'gray'});
$("#result").width( width );
});
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
</head>
<body>
<p>Click on any square:</p>
<span id="result"> </span>
<div style="background-color:blue; height:50px;"></div>
<div style="background-color:pink;height:30px;"></div>
<div style="background-color:#123456;height:100px;"></div>
<div style="background-color:#f11; height:75px;"></div>
</body>
</html>

width( ) Method

The width( ) method gets the current computed, pixel, width of the first matched element.

Syntax

Here is the simple syntax to use this method:

selector.width( )

This method is able to find the width of the window and document as follows:

$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document

Parameters

Here is the description of all the parameters used by this method:

Example

Following is a simple example showing the usage of this method:

<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("div").click(function () {
var color = $(this).css("background-color");
var width = $(this).height();
$("#result").html("That div is <span>" +color+ "</span>.");
$("#result").css({'color': color,
'background-color':'gray'});
$("#result").width( width );
});
});
</script>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
</head>
<body>
<p>Click on any square:</p>
<span id="result"> </span>
<div style="background-color:blue; height:50px;"></div>
<div style="background-color:pink;height:30px;"></div>
<div style="background-color:#123456;height:100px;"></div>
<div style="background-color:#f11; height:75px;"></div>
</body>
</html>

« Previous | 1 | 2 | 3 | Next »

The largest Interview Solution Library on the web

JQUERY - CSS SELECTOR METHODS