Home Ajax Jquery Working with CSS(CSS Manipulation)
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Working with CSS(CSS Manipulation)

Advertisement
This page discusses - 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>

.position( )

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

Example :

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

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

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

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>

.width( )

This method get the width of the first matched element.

Example :

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.

Advertisement

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Ask Questions?    Discuss: Working with CSS(CSS Manipulation)  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com