Get the actual height of elements grouped using: before and: after
Is there a way to get the actual height in javascript (jquery is fine too) of an element that is drawn with :before
and :after
?
Checkout this fiddle: http://jsfiddle.net/a7rhdk86/
Thank!
source to share
You can use window.getComputedStyle
to access styles: in front of the pseudo-element. See http://davidwalsh.name/pseudo-element . However, this gets css the height and width of the element, not the bounding box after the rotation transform.
Falling into hacky territory, I borrowed the code from http://upshots.org/javascript/jquery-copy-style-copycss , copied all the styles from the pseudo-element to the actual element, added it to the DOM and use getBoundingClientRect to get the bounding box.
var style = window.getComputedStyle(
document.querySelector(".arrow"), ":before"
)
var dest = {}
if (style.length) {
for (var i = 0, l = style.length; i < l; i++) {
prop = style[i];
camel = prop.replace(/\-([a-z])/, camelize);
val = style.getPropertyValue(prop);
dest[camel] = val;
}
} else {
for (prop in style) {
camel = prop.replace(/\-([a-z])/, camelize);
val = style.getPropertyValue(prop) || style[prop];
dest[camel] = val;
}
}
var copy = $("<div />").css(dest)
copy.appendTo(".arrow")
var boundingRect = copy[0].getBoundingClientRect()
console.log(boundingRect.height)
console.log(boundingRect.width)
copy.remove()
function camelize(a, b) {
return b.toUpperCase();
}
source to share