Question

我试图弄清楚为什么javascript无法访问伪元素。有人说这是因为伪元素不是dom的一部分。这是真的吗？那么为什么我们能够访问它的样式属性。

var color = window.getComputedStyle(
    document.querySelector('.element'), ':before'
).getPropertyValue('color')

对于给定的html元素。

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
   <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8" />
      <title>EPS</title>
      <script>
          function test(){
              debugger;
var a = document.getElementById("1");
var node = a.previousSibling;
          }

          </script>
      <style>
          body{
              counter-reset: test;
          }

       ul{
           list-style-type: none;

       }
        li::before{
            counter-increment: test;
            content: counter(test,lower-greek)" ";
        }
          </style>
   </head>
   <body onload="test();">
<ul>
<li id="1">do outstanding teachers do. new text added?</li>
<li id= "2">What do they do differently from you new text added ?</li>

</ul>
   </body>
</html>

document.getElementById（“1”）; 为我们提供了一个源自HtmlElement的HtmlLielement - ＆gt;元素 - ＆gt;节点伪元素是不是从上面的类层次结构继承，因为我无法在列表项2之前访问伪元素的计数器值。

有人可以告诉我无法从JavaScript访问伪元素的原因。

Answer 1

有些人说这是因为伪元素不是dom的一部分。这是真的吗？

是的，但是I'm one of the people who said that，如果您仍然持怀疑态度，请随时不要接受我的话。

然后我们为什么能够访问它的样式属性。

因为那是CSSOM，而不是DOM。 CSSOM旨在允许脚本查询和读取伪元素样式。

有人可以告诉我无法从JavaScript访问伪元素的原因。

上面的答案中概述了原因。为了完整起见，以下是相关部分：

伪元素本身不是DOM的一部分，因为顾名思义，伪元素不是真正的元素

为什么我们不能像其他htmlelement一样访问元素

1 个答案: