admin管理员组

文章数量:1291037

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): /

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

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/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
  • javascript
  • css
Share Improve this question edited Jul 15, 2014 at 8:50 Marcin Nabiałek 112k43 gold badges267 silver badges298 bronze badges asked Jul 10, 2014 at 8:55 RikardRikard 7,80513 gold badges60 silver badges99 bronze badges 3
  • I havent looked at IE for a long time but IE in getComputedStyle seems to calculate padding and border inside the box while other browsers calculate it outside. 200px - (10+10 border) - (10+10 padding) = 160px – erosman Commented Jul 10, 2014 at 9:02
  • @erosman, thanks for feedback. Yes, IE calculates in its own way. Do you know the answer to the question I wrote in the first line? – Rikard Commented Jul 10, 2014 at 9:06
  • Sorry, I dont (not exactly) but ... getComputedStyle() get its data from CSS so the data is hard-coded in the CSS. getBoundingClientRect() is a text rectangle object that encloses a group of text rectangles. In other words, it seems that its gets its data from the rendering of the object. The difference, es from the CSS Box Model and as it says in that page: "IE8 and earlier versions of IE, included padding and border in the width property. To fix this problem, add a <!DOCTYPE html> to the HTML page." – erosman Commented Jul 10, 2014 at 11:19
Add a ment  | 

2 Answers 2

Reset to default 5

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, i.e., the CSS border-boxes associated with the element). The latter, getComputedStyle(), will return the puted 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/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.

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

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 bee 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

'putedValue : 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)

本文标签： javascriptmethods for element widthheightStack Overflow

版权声明：本文标题：javascript - methods for element widthheight - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741510687a2382589.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。