Working with CSS(CSS Manipulation)

These methods are used to manipulate CSS specially by getting and setting CSS-related properties of elements.

.css( )

This method get the CSS style property of the first matched element..

Example :

<script> $("div").click(function () { var color = $(this).css("background-color"); $("#result").html("That div is <span style='color:" + color + ";'>" + color + "</span>."); }); </script>

Above code display the color code of the clicked 'div' .

.height( )

This method get the height of the first matched element.

Example :

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

.innerHeight( )

This method return the height for the first element including padding but not border. This method is not applicable to window and document objects; for these, use .height() instead.

Example :

Following code get the innerHeight of a paragraph :

<body> <p>Hello</p><p></p> <script> var p = $("p:first"); $("p:last").text( "innerHeight:" + p.innerHeight() ); </script> </body>

.innerWidth( )

This method return the width for the first element including padding but not border. This method is not applicable to window and document objects; for these, use .height() instead.

Example :

Following code will get the innerWidth of a paragraph :

<body> <p>Hello</p><p></p> <script> var p = $("p:first"); $("p:last").text( "innerWidth:" + p.innerWidth() ); </script> </body>

.offset( )

This method get the current coordinate of the matched element, relative to the document.

Example :

This method returns the offset of the second paragraph

<body> <p>Hello</p><p>2nd Paragraph</p> <script>var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top ); </script> </body>

.outerHeight( )

This method get the outer Height from the first matched element, including padding and border.This method is not applicable to window and document objects; for these, use .height() instead.

Example :

The following code get the outer Height of a paragraph :

<body> <p>Hello</p><p></p> <script>var p = $("p:first"); $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) ); </script> </body>

.outerWidth( )

This method get the outer width from the first matched element, including padding and border.This method is not applicable to window and document objects; for these, use .height() instead.

Example :

The following code get the outer Width of a paragraph :

<body> <p>Hello</p><p></p> <script>var p = $("p:first"); $("p:last").text( "outerWidth:" + p.outerWidth()+ " , outerWidth(true):" + p.outerWidth(true) ); </script> </body> 0

.position( )

This method get the coordinates of the first matched element , relative to the offset parent.

Example : 1

Following code return the position of the second paragraph :

<body>
<p>Hello</p><p></p>
<script>var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth()+ " , outerWidth(true):" + p.outerWidth(true) );
</script>
</body>

.scrollLeft( ) 2

This method get the current horizontal position of the scroll bar for the first matched element.

Example :

Following code get the current horizontal position of the scroll bar for the first 'p' : 3

<body> <p>Hello</p><p></p> <script>var p = $("p:first"); $("p:last").text( "scrollLeft:" + p.scrollLeft() ); </script> </body>

.scrollTop( )

This method get the current vertical position of the scroll bar for the first matched element. 4

Example :

Following code get the current vertical position of the scroll bar for the first 'p' :

<body> <p>Hello</p><p></p> <script> var p = $("p:first"); $("p:last").text( "scrollTop:" + p.scrollTop() ); </script> </body> 5

.width( )

This method get the width of the first matched element.

Example : 6

Following are some example of 'width()' method :

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

Learn from experts! Attend jQuery Training classes. 7

Working with CSS(CSS Manipulation)