0

我试图弄清楚为什么 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"); 给了我们一个 HtmlLielement，它派生自 HtmlElement --> Element --> Node Is 伪元素不是从上面的类层次结构继承的，因为我无法在列表项 2 之前访问伪元素的计数器值。

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

4

1 回答 1

1

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

是的，但我是这么说的人之一，所以如果你仍然持怀疑态度，请不要相信我的话。

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

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

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

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

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

于 2018-04-21T13:41:50.093 回答