Tuesday, May 5, 2020

The Practical Guide on how to implement the jQuery CSS Methods



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>

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>

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>

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 -

<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>

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 -

<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.

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 -

<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.

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.
Share:

0 comments:

Post a Comment