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 -
<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" );
$( "#result" ).html( "This div is <span style = 'color: " +
color + "; '>" + color + "</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 = "result"></span>
<div style = "background-color: yellow; "></div>
<div style = "background-color: rgb(15, 99, 30);"></div>
<div style = "background-color: #123456;"></div>
<div style = "background-color: #f11; "></div>
</body>
</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" );
$( "#result" ).html( "This div is <span style = 'color: " +
color + "; '>" + color + "</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 = "result"></span>
<div style = "background-color: yellow; "></div>
<div style = "background-color: rgb(15, 99, 30);"></div>
<div style = "background-color: #123456;"></div>
<div style = "background-color: #f11; "></div>
</body>
</html>
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 -
<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" );
$( "#result" ).html( "This div is <span>" + color + "</span>." );
$( "#result" ).css( "color" , color );
} );
} );
</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; "></div>
<div style = "background-color: rgb(15, 99, 30);"></div>
<div style = "background-color: #123456;"></div>
<div style = "background-color: #f11; "></div>
</body>
</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" );
$( "#result" ).html( "This div is <span>" + color + "</span>." );
$( "#result" ).css( "color" , color );
} );
} );
</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; "></div>
<div style = "background-color: rgb(15, 99, 30);"></div>
<div style = "background-color: #123456;"></div>
<div style = "background-color: #f11; "></div>
</body>
</html>
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 -
<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" );
$( "#result" ).html( "This div is <span>" + color + "</span>." );
$( "#result" ).css( {'color' : 'yellow' , 'font-weight' : 'bold' ,
'background-color' : 'gray'} );
} );
} );
</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; "></div>
<div style = "background-color: rgb(15, 99, 30);"></div>
<div style = "background-color: #123456;"></div>
<div style = "background-color: #f11; "></div>
</body>
</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" );
$( "#result" ).html( "This div is <span>" + color + "</span>." );
$( "#result" ).css( {'color' : 'yellow' , 'font-weight' : 'bold' ,
'background-color' : 'gray'} );
} );
} );
</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; "></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
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>
<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
$( 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 -
<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>
<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>
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>
<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>
<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.
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>
<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.
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>
<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.
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>
<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.
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>
<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.
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>
<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.
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 -
<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( 400 );
} );
</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>
</body>
</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( 400 );
} );
</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>
</body>
</html>
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.
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>
<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.
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 -
<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( 400 );
} );
</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>
</body>
</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( 400 );
} );
</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>
</body>
</html>
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.
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>
<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>
<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
$( 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>
<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.
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.