Issue
Suppose that I have a <div>
that I wish to center in the browser's display (viewport). To do so, I need to calculate the width and height of the <div>
element.
What should I use? Please include information on browser compatibility.
Solution
You should use the .offsetWidth
and .offsetHeight
properties.
Note they belong to the element, not .style
.
var width = document.getElementById('foo').offsetWidth;
The .getBoundingClientRect()
function returns the dimensions and location of the element as floating-point numbers after performing CSS transforms.
> console.log(document.getElementById('foo').getBoundingClientRect())
DOMRect {
bottom: 177,
height: 54.7,
left: 278.5,
right: 909.5,
top: 122.3,
width: 631,
x: 278.5,
y: 122.3,
}
Answered By - Greg
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.