选择:在伪类/元素之后

时间:2011-03-18 03:18:25

标签: jquery css

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

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

1 个答案:

答案 0 :(得分:5)

请注意,您使用:aftercontent添加的内容不是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>

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