Search within TutorialsPark

Jquery CSS Convenience Methods


Learn to use jQuery to apply speciifc CSS properties


jQuery CSS: Property Specific CSS Convenience Method

The jQuery provides a set of methods that can be used to get or set specific CSS properties on the Document.


Table : Methods to Work with Specific CSS Properties

Method Description
height() To get height in the pixels for the first element in the jQuery object.
height(value) To set the height for all of the element in jQuery Object.
innerHeight() To gets the inner height of the first element in the jQuery object.
innerWidth() To get the inner width of the first element in the jQuery object.
offset() To return the co-ordinates of the first element in the jQuery object relative to the document.
outerHeight(boolean) To get the height of the first element in the jQuery object, including padding and border.The argument determines if the margin is included.
outerWidth(boolean) To get the width of the first element in the jQuery object, including padding and border.The argument determines if the margin is included.
position() To return the co-ordinates of the first element in the jQuery object relative to the offset.
scrollLeft()
scrollTop()
To get the horizontal or vertical positions of all the first element in the jQuery Object.
scrollLeft(value)
scrollTop(value)
To set the horizontal or vertical position of all the elements in a jQuery object.
width() To get the width of the first element in a jQuery object.
width(value) To set the width of all of the elements in a jQuery object.
height(function)
width(function)
To set the width or height for all of the elements in the jQuery object using a function.

JQuery CSS Method position()

The jQuery Method of position() is used to get the position of the first element in the matched set of elements, relative to its nearest relative, absolute or fixed positioned ancestor.

Example: jQuery CSS Method position()

Give it a TRY! » Note: The script gets the top and left Position of the img Element.


Get Top and Left Co-ordinates using offset() Method

jQuery Method of offset() is used to get the co-ordinates of the top and left edges of the first element in the set of matched elements.

Example: Get Top and Left Co-ordinates using offset() Method

Give it a TRY! » Note:It locates the top, left positions of the matched elements.


Setting Element using width() and height() method

The jQuery method of width() and height() is used to set the width and height of element on the document

Example: Setting Element using width() and height() method

Give it a TRY! » Note:We set a new width and height of the Image .


Getting and Setting Scroll Properties using scrollLeft() and scrollRight()

The jQuery method of scrollLeft() and scrollTop() is used to get the number of pixels that the window or scrollable element within the Document has been scrolled

By Providing a numeric value as an argument you can set the number of pixels to be scrolled.

Example: Getting and Setting Scroll Properties using scrollLeft() and scrollRight() method

Give it a TRY! » Note:The scroll bar moves 100px downwards and 100px towards right.


Getting Inner and outer Width and Height

The jQuery method of outerHeight() and outerWidth() is used to compute the outer height and width respectively of the first element in the set of matched elements.It includes the padding but excludes the border and margin.

Similarly, the innerWidth() and innerHeight() is used to compute the inner width and inner height.

The methods of outerWidth(boolean) and outerHeight(boolean) is used to get the outer width and height respectively, a boolean value of true means that the margins are included as well, a value of false means margins are excluded.

Example: Getting Inner and Outer Width and Height

Give it a TRY! » Note:All values are expressed in pixels (px).


Using a Function to set width() and height()

The jQuery method of width(function) and height(function) uses a function as an argument to set the width and height.

Example: Using a Function to set Width and Height

Give it a TRY! » Note: The function reduces the value of width and height on each invocation.