选择 :after 伪类/元素

Question

选择 :after 伪类/元素

6

在CSS中，我使用了body:after来添加内容，我想在jQuery中获取它的高度。我该如何做呢？我从这里读到，这些伪元素用于修改，因此无法被选择？我好像甚至无法使用$("body > :last-child")来选择最后一个子元素，它应该是:after吗？

- JM at Work

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Richard JP Le Guen · Accepted Answer

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

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>

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