Menu
This seems like a suspiciously straight-forward question but having searched StackOverflow and Google and used the usual tricks (getBoundingClientRect, clientWidth, offsetWidth) I've yet to find an answer.
Simply, is there a way to find the width/height of an element including not only border, padding etc, but also the shadow?
See: jsfiddle for an example of how everything returns the width of the element without the shadow.
EDIT: Ideally, I'd prefer not to have to investigate the CSS attribute for the shadow and parse out the dimensions, though perhaps that's the only way.
815
Padding increases the size when using the content-box sizing model. However, margins are outside of the element and create space between elements but do not affect the size of the element itself. Effects like box-shadow don't affect the size or the spacing.
In CSS, shadows on the boxes of elements are created using the box-shadow property (if you want to add a shadow to the text itself, you need text-shadow ). The box-shadow property takes a number of values: The offset on the x-axis. The offset on the y-axis.
To find the width and height of an element, width() and height() methods are used. The width() method is used to check the width of an element. It does not check the padding, border and margin of the element.
To get the width of a specific HTML Element in pixels, using JavaScript, get reference to this HTML element, and read the clientWidth property of this HTML Element. clientWidth property returns the width of the HTML Element, in pixels, computed by adding CSS width and CSS padding (top, bottom) of this HTML Element.
You're right, I agree it's a pretty straight forward question. Here's the problem, when you give an element a box-shadow, the box-shadow is treated like a sub-element with absolute positioning properties to it's parent element. So automatically the placement of that object under it's parent becomes a relative positioning question. They are essentially now two separate objects and need calculated separately.
My only suggestion would be to calculate the box-shadow's x/y positioning and add them to the width/height of the parent element. For example, in your jsfiddle, the box shadow is protruding 10px along the x-axis, and below 10px along the y-axis. With the 5px blur, add 2.5px to either side and then add the height/width to those values:
104px (width) + 10px (x-axis shadow extension) + 2.5 px (blur) = 116.5px width
104px (height) + 10px (y-axis shadow extension) + 2.5px (blur) = 116.5px height
175
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
