Menu
In CSS, I have used body:after to add content, I want to in jQuery get its height. How might I do that?
I read from here such pseudo elements are for modifications and thus unselectable? I seem to be unable to even use $("body > :last-child") to select the last child which should be the :after?
362
Note that the content you add using :after and content isn't a node - it isn't either an element nor text in your document. You can see this with FireBug: in this screenshot, my HTML contains the word "hello" but the word "world!" is added using CSS:
What you can do is use getComputedStyle to find out what the content is, like the following example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Select :after pseudo class/element</title>
<style type="text/css">
#msg:after {
content:" World!"
}
</style>
<script type="text/javascript">
window.onload = function() {
if(window.getComputedStyle) {
var element = document.getElementById("msg");
var style = window.getComputedStyle(element,':after')
alert(style.content);
}
else {
alert("This browser sucks!"); // ;)
}
}
</script>
</head>
<body>
<h1>
<span id="msg">Hello</span>
</h1>
</body>
</html>
... unfortunately, this gives you access to the content but not to the height :(
75
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
