Working with CSS(CSS Manipulation)

This page discusses - Working with CSS(CSS Manipulation)

Working with CSS(CSS Manipulation)

Working with CSS(CSS Manipulation)

     

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