元素宽度/高度的方法

Question

Question: Is there a scenario where getBoundingClientRect and window.getComputedStyle would differ in width or height ?

I just found a inconsistent width (see under) in IE when a element has box-sizing where window.getComputedStyle returns the wrong value.

So I thought about overriding just width and height with values from getBoundingClientRect but not sure if there are cases where that would fail.

Example of the problem (broken in IE): http://jsfiddle.net/bwPM8/

var box = document.querySelector('.box');
var gBCR_width = box.getBoundingClientRect().width; // always 200
var wGCS = window.getComputedStyle(box).width; // 200 some browsers, 160 in IE

Answer 1

In IE the CSS padding: 10px; cause overflow and that gives you extra size of the computedStyle..

Also IE calculates Borders separately from the object.

This sums up the answer with difference of 40px

Now with overflow:hidden; OR box-sizing: border-box; that cause value go in minus so will become 200px - 40px = 160px.

Note: Here if we remove overflow:hidden will not make any difference as the box-sizing:border-box cause the design not to grow further from defined height and width.

I have generate another fiddle 1 (without padding) which gives

'computedValue : 180px'

And with Border:0px the fiddle 2 give results same as in other browser..

I hope this clears what causes what in IE(IE has its own mind that sometimes cause pain to developers)

Answer 2

Yes, there are several differences between these two functions.

getBoundingClientRect() will return a text rectangle object that encloses a group of text rectangles (the union of the rectangles returned by getClientRects() for the element, ie, the CSS border-boxes associated with the element). The latter, getComputedStyle() , will return the computed CSS style of that element, after applying all CSS.

Therefore the resulting width and height can be drastically different.

For instance, by simply applying a transform to that element you already change the width that is returned by getBoundingClientRect() :

http://jsfiddle.net/epW3c/

Moreover, even if you add a border or padding to your element, the width and height will be different in both cases.

Depending on the version of IE you're testing this on, you might be experiencing the infamous Internet Explorer box model bug which causes the interpretation of the dimensions of the element to be wrong. Make sure you're not running your page in quirks mode by adding the doctype properly.