Hello guys! Welcome to a new section of my tutorial on jQuery. In my last tutorial, i gave a full list of all the CSS Selectors Methods available in jQuery. Now in this tutorial post, am going to be discussing about these methods one after the other. Its going to be a very long read so i would advice you take your time and as well ask your questions where necessary.

css( name ) Method

css( name ) method returns a style property on the first matched element.

Syntax

Below is the syntax to use this method -

selector.css( name )

Parameter Details

Here is the description of all the parameters used by this methods -

name - The name of the property to access.

Example

The following example below shows a simple usage of this method -

css( name, value ) Method

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

Syntax

Below is the syntax to use this method -

selector.css( name, value )

Parameter Details

Here is the description of all the parameters used by this methods -

name - The name of the property to access.

value - The value of the property.

Example

The following example below shows a simple usage of this method -

You can also read our tutorial post on: The Complete List of jQuery CSS Selectors Methods

css( properties ) Method

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

Syntax

Below is the syntax to use this method -

selector.css( properties )

Parameter Details

Here is the description of all the parameters used by this methods -

properties - The key/value pairs to set as style properties.

Example

The following example below shows a simple usage of this method -

height( val ) Method

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

Syntax

Below is the syntax to use this method -

selector.height( val )

Parameter Details

Here is the description of all the parameters used by this methods -

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

Example

The following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {
$( "div" ).click( function( ) {
var color = $( this ).css( "background - color" );
var height = $( this ).height( );

$( "#result" ).html( "This div is <span>" + color + "</span>." );
$( "#result" ).css( {'color' : color , 'background-color' : 'gray'} );
$( "#result" ).height( height );
} );
} );
</script>

<style>
div {
width: 60px; height: 60px; margin: 4px; float: left;
}
</style>
</head>

<body>
<p>Click on any square to see result:</p>
<span id = "result"></span>

<div style = "background-color: yellow; height: 40px; "></div>
<div style = "background-color: pink; height: 30px;"></div>
<div style = "background-color: #123456; height: 90px;"></div>
<div style = "background-color: #f11; height: 70px; "></div>
</body>
</html>

height( ) Method

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

Syntax

Below is the 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 the browser viewport
$( document ).height( ); // returns height of the HTML document

Parameter Details

Here is the description of all the parameters used by this methods -

NA.

Example

The following example below shows a simple usage of this method -

You can also read our tutorial post on: A Comprehensive Guide to DOM Filter Methods in jQuery

innerHeight( ) Method

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

Syntax

Below is the syntax to use this method -

selector.innerHeight( )

Parameter Details

Here is the description of all the parameters used by this methods -

NA.

Example

The following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/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 to see result:</p>
<span id = "result"></span>

<div id = "div1" style = "background-color: yellow; height: 40px; "></div>
<div id = "div2" style = "background-color: pink; height: 30px;"></div>
<div id = "div3" style = "background-color: #123456; height: 90px;"></div>
<div id = "div4" style = "background-color: #f11; height: 70px; "></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

Below is the syntax to use this method -

selector.innerWidth( )

Parameter Details

Here is the description of all the parameters used by this methods -

NA.

Example

The following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/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 to see result:</p>
<span id = "result"></span>

<div id = "div1" style = "background-color: yellow; height: 40px; "></div>
<div id = "div2" style = "background-color: pink; height: 30px;"></div>
<div id = "div3" style = "background-color: #123456; height: 90px;"></div>
<div id = "div4" style = "background-color: #f11; height: 70px; "></div>
</body>
</html>

offset( ) Method

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

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

Syntax

Below is the syntax to use this method -

selector.offset( )

Parameter Details

Here is the description of all the parameters used by this methods -

NA.

Example

The following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/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: 4px; float: left;
}
</style>
</head>

<body>
<p>Click on any square to see result:</p>
<span id = "lresult"></span>
<span id = "tresult"></span>

<div style = "background-color: yellow; height: 40px; "></div>
<div style = "background-color: pink; height: 30px;"></div>
<div style = "background-color: #123456; height: 90px;"></div>
<div style = "background-color: #f11; height: 70px; "></div>
</body>
</html>

You can also read our tutorial post on: Introduction to JavaScript Animation with examples

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 a position ( relative or absolute ). This method can only work with visible elements.

Syntax

Below is the syntax to use this method -

selector.offsetParent( )

Parameter Details

Here is the description of all the parameters used by this methods -

NA.

Example

The following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/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: 4px; float: left;
}
</style>
</head>

<body>
<p>Click on any square to see result:</p>
<span id = "lresult"></span>
<span id = "tresult"></span>

<div style = "background-color: yellow;">
<div style = "background-color: pink;"></div>
</div>

<div style = "background-color: #123456;">
<div style = "background-color: #f11;"></div>
</div>
</body>
</html>

outerHeight( [margin] ) Method

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 also the hidden elements. Its not supported by elements that are indirectly hidden by consequence of the parent being hidden.

Syntax

Below is the syntax to use this method -

selector.outerHeight( [margin] )

Parameter Details

Here is the description of all the parameters used by this methods -

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

Example

The following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/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 to see result:</p>
<span id = "result"></span>

<div id = "div1" style = "background-color: yellow; height: 40px; "></div>
<div id = "div2" style = "background-color: pink; height: 30px;"></div>
<div id = "div3" style = "background-color: #123456; height: 90px;"></div>
<div id = "div4" style = "background-color: #f11; height: 70px; "></div>
</body>
</html>

You can also read our tutorial post on: The complete guide to JavaScript Math Object with examples

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 also the hidden elements. Its not supported by elements that are indirectly hidden by consequence of the parent being hidden.

Syntax

Below is the syntax to use this method -

selector.outerWidth( [margin] )

Parameter Details

Here is the description of all the parameters used by this methods -

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

Example

The following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/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 to see result:</p>
<span id = "result"></span>

<div id = "div1" style = "background-color: yellow; height: 40px; "></div>
<div id = "div2" style = "background-color: pink; height: 30px;"></div>
<div id = "div3" style = "background-color: #123456; height: 90px;"></div>
<div id = "div4" style = "background-color: #f11; height: 70px; "></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 about two integer properties top and left. For accurate calculation make sure to use pixel values for margins, borders, and padding. This method only works with visible elements.

Syntax

Below is the syntax to use this method -

selector.position( )

Parameter Details

Here is the description of all the parameters used by this methods -

NA.

Example

The following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/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: 4px; float: left; }
</style>
</head>

<body>
<p>Click on any square to see result:</p>
<span id = "lresult"></span>
<span id = "tresult"></span>

<div style = "background-color: yellow; height: 40px; "></div>
<div style = "background-color: pink; height: 30px;"></div>
<div style = "background-color: #123456; height: 90px;"></div>
<div style = "background-color: #f11; height: 70px; "></div>
</body>
</html>

scrollLeft( val ) Method

The scrollLeft( val ) method is used to set the scroll left offset to the passed value on all the matched elements.

This method works for both visible and hidden elements.

Syntax

Below is the syntax to use this method -

selector.scrollLeft( val )

Parameter Details

Here is the description of all the parameters used by this methods -

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

Example

The following example below shows a simple usage of this method -

You can also read our tutorial post on: Learn how to work with core JavaScript Date Properties

scrollLeft( ) Method

The scrollLeft( ) method is used to get the scroll left offset of the first matched element.

This method works for both visible and hidden elements.

Syntax

Below is the syntax to use this method -

selector.scrollLeft( )

Parameter Details

Here is the description of all the parameters used by this methods -

NA.

Example

The following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {
$( "div.demo" ).scrollLeft( 250 );

$( "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: 4px solid #666666;
margin: 5px; padding: 5px; position: relative;
width: 230px; height: 100px; overflow: auto; }
p { margin: 10px; padding: 5px; border: 2px solid #666;
width: 800px; height: 800px; }
</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 the scroll top offset to the passed value on all the matched elements.

This method works for both visible and hidden elements.

Syntax

Below is the syntax to use this method -

selector.scrollTop( val )

Parameter Details

Here is the description of all the parameters used by this methods -

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

Example

The following example below shows a simple usage of this method -

You can also read our tutorial post on: JavaScript Loop Control

scrollTop( ) Method

The scrollTop( ) method is used to get the scroll top offset of the first matched element.

This method works for both visible and hidden elements.

Syntax

Below is the syntax to use this method -

selector.scrollTop( )

Parameter Details

Here is the description of all the parameters used by this methods -

NA.

Example

The following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {
$( "div.demo" ).scrollTop( 250 );

$( "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: 4px solid #666666;
margin: 5px; padding: 5px; position: relative;
width: 230px; height: 100px; overflow: auto; }

div.result { margin: 10px; width: 100px; height: 100px;
float: left; background-color: blue; }

p { margin: 10px; padding: 5px; border: 2px solid #666;
width: 800px; height: 800px; }
</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

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

Syntax

Below is the syntax to use this method -

selector.width( val )

Parameter Details

Here is the description of all the parameters used by this methods -

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

Example

The following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {
$( "div" ).click( function( ) {
var color = $( this ).css( "background - color" );
var width = $( this ).height( );

$( "#result" ).html( "This div is <span>" + color + "</span>." );
$( "#result" ).css( {'color' : color , 'background-color' : 'gray'} );
$( "#result" ).width( width );
} );
} );
</script>

<style>
div {
width: 60px; height: 60px; margin: 4px; float: left;
}
</style>
</head>

<body>
<p>Click on any square to see result:</p>
<span id = "result"></span>

<div style = "background-color: yellow; height: 40px; "></div>
<div style = "background-color: pink; height: 30px;"></div>
<div style = "background-color: #123456; height: 90px;"></div>
<div style = "background-color: #f11; height: 70px; "></div>
</body>
</html>

width( ) Method

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

Syntax

Below is the 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 the browser viewport
$( document ).width( ); // returns width of the HTML document

Parameter Details

Here is the description of all the parameters used by this methods -

NA.

Example

The following example below shows a simple usage of this method -

<html>
<head>
<title>jQuery Example</title>
<script type = "text/javascript"
src = "https//ajax.googleapis.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>

<script type = "text/javascript">
$( document ).ready( function( ) {
$( "div" ).click( function( ) {
var color = $( this ).css( "background - color" );
var width = $( this ).height( );

$( "#result" ).html( "This div is <span>" + color + "</span>." );
$( "#result" ).css( {'color' : color , 'background-color' : 'gray'} );
$( "#result" ).width( width );
} );
} );
</script>

<style>
div {
width: 60px; height: 60px; margin: 4px; float: left;
}
</style>
</head>

<body>
<p>Click on any square to see result:</p>
<span id = "result"></span>

<div style = "background-color: yellow; height: 40px; "></div>
<div style = "background-color: pink; height: 30px;"></div>
<div style = "background-color: #123456; height: 90px;"></div>
<div style = "background-color: #f11; height: 70px; "></div>
</body>
</html>

Alright guys! We have come to the end of this tutorial post on jQuery CSS Methods. In my next tutorial, i will be discussing about jQuery DOM Manipulation.

Follow us on our various social media platforms available and subscribe to our newsletter to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.

The Practical Guide on how to implement the jQuery CSS Methods

css( name ) Method

Syntax

Parameter Details

Example

css( name, value ) Method

Syntax

Parameter Details

Example

css( properties ) Method

Syntax

Parameter Details

Example

height( val ) Method

Syntax

Parameter Details

Example

height( ) Method

Syntax

Parameter Details

Example

innerHeight( ) Method

Syntax

Parameter Details

Example

innerWidth( ) Method

Syntax

Parameter Details

Example

offset( ) Method

Syntax

Parameter Details

Example

offsetParent( ) Method

Syntax

Parameter Details

Example

outerHeight( [margin] ) Method

Syntax

Parameter Details

Example

outerWidth( [margin] ) Method

Syntax

Parameter Details

Example

position( ) Method

Syntax

Parameter Details

Example

scrollLeft( val ) Method

Syntax

Parameter Details

Example

scrollLeft( ) Method

Syntax

Parameter Details

Example

scrollTop( val ) Method

Syntax

Parameter Details

Example

scrollTop( ) Method

Syntax

Parameter Details

Example

width( val ) Method

Syntax

Parameter Details

Example

width( ) Method

Syntax

Parameter Details

Example

Post a Comment

Get new posts by email: