选择：伪类/元素之后答案

【问题标题】：Select :after pseudo class/element选择：伪类/元素之后
【发布时间】：2011-03-18 03:18:24
【问题描述】：

在 CSS 中，我使用 body:after 添加内容，我想在 jQuery 中获取它的高度。我该怎么做？

我从here 读到这样的伪元素用于修改，因此无法选择？我似乎甚至无法使用$("body > :last-child") 来选择最后一个应该是:after 的孩子？

【问题讨论】：

【解决方案1】：

请注意，您使用:after 和content 添加的内容不是node - 它既不是文档中的元素也不是文本。您可以使用 FireBug 看到这一点：在此屏幕截图中，我的 HTML 包含单词“hello”但单词“world！”使用 CSS 添加：

您可以使用getComputedStyle 找出内容是什么，如以下示例：

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

...不幸的是，这使您可以访问内容，但不能访问高度:(

【讨论】：

@MikeHometchko - 那么我喜欢你，伙计！ :D