♦ jQuery Dimensions
♣ About jQuery Dimensions
The dimensions of the HTML elements can be retrieved.These dimensions, for instance, can be then used for shaping website dynamically.
♣ Example1: jQuery width()
width() method returns the width of the HTML element selected.Note that padding, margin and border is not included for calculation of the width.
Below is the representation of jQuery width() Syntax.
Basic Syntax
$(selector).width()
Syntax Explanation:
selector : HTML element selector
width() : method for returning width
In this example, jQuery width() method is illustrated.width() : method for returning width
Example
Input:
Output:
♣ Example2: jQuery height()
height() method returns the height of the HTML element selected.Note that padding, margin and border is not included for calculation of the height.
Below is the representation of jQuery height() Syntax.
Basic Syntax
$(selector).height()
Syntax Explanation:
selector : HTML element selector
height() : method for returning height
In this example, jQuery height() method is illustrated.height() : method for returning height
Example
Input:
Output:
♣ Example3: jQuery innerWidth()
innerWidth() method returns the innerWidth of the HTML element selected.Note that margin and border is not included for calculation of the width.
Below is the representation of jQuery innerWidth() Syntax.
Basic Syntax
$(selector).innerWidth()
Syntax Explanation:
selector : HTML element selector
innerWidth() : method for returning innerWidth
In this example, jQuery innerWidth() method is illustrated.innerWidth() : method for returning innerWidth
Example
Input:
Output:
♣ Example4: jQuery innerHeight()
innerHeight() method returns the innerHeight of the HTML element selected.Note that margin and border is not included for calculation of the width.
Below is the representation of jQuery innerHeight() Syntax.
Basic Syntax
$(selector).innerHeight()
Syntax Explanation:
selector : HTML element selector
innerHeight() : method for returning innerHeight
In this example, jQuery innerHeight() method is illustrated.innerHeight() : method for returning innerHeight
Example
Input:
Output:
♣ Example5: jQuery outerWidth()
outerWidth() method returns the outerWidth of the HTML element selected.Note that margin is not included for calculation of the width.
Below is the representation of jQuery outerWidth() Syntax.
Basic Syntax
$(selector).outerWidth()
Syntax Explanation:
selector : HTML element selector
outerWidth() : method for returning outerWidth
In this example, jQuery outerWidth() method is illustrated.outerWidth() : method for returning outerWidth
Example
Input:
Output:
♣ Example6: jQuery outerHeight()
outerHeight() method returns the outerHeight of the HTML element selected.Note that margin is not included for calculation of the width.
Below is the representation of jQuery outerHeight() Syntax.
Basic Syntax
$(selector).outerHeight()
Syntax Explanation:
selector : HTML element selector
outerHeight() : method for returning outerHeight
In this example, jQuery outerHeight() method is illustrated.outerHeight() : method for returning outerHeight
Example
Input:
Output: