Question

When I’m use development tools’ link in Chrome I can select any tag(in source code) and info about chosen element are displayed(image below). I need write script that can do the same operation. How I can get width and height for every tag in a source code. Any idea?
.

Answer 1

There’s this lovely getBoundingClientRect function. No need for jQuery. Works in every browser.

var rect = document.getElementById('foobar').getBoundingClientRect();

console.log(rect.width);
console.log(rect.height);
console.log(rect.left);
console.log(rect.right);
console.log(rect.top);
console.log(rect.bottom);