Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

62
CHAPTER 2 ■ COMMON JQUERY ACTIONS AND METHODS
.innerHeight(), .innerWidth(), .outerHeight(), and .outerWidth()
The inner height and width of an element is the width or height not counting borders or margins. You
can access this information using the .innerHeight() and .innerWidth() methods.
If you wish to include the borders in the height or width of the element, use .outerHeight() or
.outerWidth(). To include margins as well, use .outerHeight(true) or .outerWidth(true).
Add a margin and border to the paragraph with class foo and then log its different widths and
heights:
var el = $("p.foo");
el.css({
"margin":"20px",
"border":"2px solid black"
});
console.log("Inner width: "+el.innerWidth()+"px");
console.log("Inner height: "+el.innerHeight()+"px");
console.log("Outer width: "+el.outerWidth()+"px");
console.log("Outer height: "+el.outerHeight()+"px");
console.log("Outer width with margins: "+el.outerWidth(true)+"px");
console.log("Outer height with margins: "+el.outerHeight(true)+"px");
This outputs the following in the console:
>>> var el = $("p.foo"); el.c...rgins: "+el.outerHeight(true)+"px");
Inner width: 840px
Inner height: 19px
Outer width: 844px
Outer height: 23px
Outer width with margins: 884px
Outer height with margins: 63px
■ Note Again, your results may vary depending on what operating system you're using.
Affecting Result Sets
To process a set of elements, we need a set of methods that allows us to affect each element in the set.