jQuery working with CSS(CSS Manipulation)

Posted on September 28, 2011 | Comments Off on jQuery working with CSS(CSS Manipulation)

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

Example :

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 :

Hello

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

Hello

.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

Hello

2nd Paragraph

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

Hello

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

Hello

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

Hello

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

Hello

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

Hello

.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

• Tweet

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Comments