Question

在CSS中，我使用body:after添加内容，我希望在jQuery中获得它的高度。我怎么能这样做？

我从here读取这些伪元素是为了修改而不可选择的？我似乎无法使用$("body > :last-child")来选择应该是:after的最后一个孩子？

Answer 1

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

Screenshot of a Hello World page where the word World is added with CSS content. FireBug is open, clearly showing that the CSS content does not add an element to the DOM

您可以使用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>

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

选择：在伪类/元素之后

1 个答案: