Question

window.getComputedStyle()方法仅接受元素节点。 有没有办法可靠地获取决定文本节点可视化表示的样式？

我意识到节点不能具有style属性，但它们肯定是样式化的，因为它们继承了父元素的样式。是否有一种方法可以从父元素中获取与文本节点的可视化表示相关的所有计算样式？

请注意，将节点包装在span中是不可能的：这会影响CSS规则，例如span:nth-child或span + span等。

Answer 1

如果文本节点是元素中的 only 节点，则只需在其getComputedStyle()上使用parentNode。

但是，请考虑以下事项：

div {border: 1px solid black;}

<div>This <em>is</em> a <strong>test</strong></div>

你不能说“This”和“a”都有边框。说“This”有左上角的边框，而“a”只有上下边框会不准确？这是值得怀疑的。

如果您将自己局限于专门适用于文字的样式（颜色，背景，文字装饰，字体等），则在getComputedStyle()上应用parentNode应始终有效。

Answer 2

我会亲自尝试一下。

在父元素上使用window.getComputedStyle()并存储标记名称和样式信息。
使用存储的标记名称创建一个新元素，并通过style属性为其指定样式。
添加子<foo>元素（严格来说，它应该是当前CSS规则中未提及的标记名称，因此它们不会影响它）。
将父元素附加到文档的<head>（特定于Webkit）。
在子元素上使用window.getComputedStyle()。
将inline设置为display属性的值（因为文本节点始终是内联的）。

请注意代码段的结果。 color为红色，margin-left为零，尽管父级有左边距，而width（和height也是auto。

var source = document.querySelector('.bar');
var sourceStyle = window.getComputedStyle(source);
var sourceTag = source.tagName;
var clone = document.createElement(sourceTag);
var child = document.createElement('foo');
var head = document.querySelector('head');

child.innerHTML = 1;
child.setAttribute('style', 'display: inline;');
clone.appendChild(child);
clone.setAttribute('style', sourceStyle.cssText);
head.appendChild(clone);
alert(window.getComputedStyle(source).marginLeft); // 100px
alert(window.getComputedStyle(child).color); // rgb(255, 0, 0);
alert(window.getComputedStyle(child).marginLeft); // 0px
alert(window.getComputedStyle(child).width); // auto

.bar {
  color: red;
  margin-left: 100px
  }

<html>
  <head>
    <title>An example</title>
  </head>
  <body>
    <div class="bar">
      foo
    </div>
  </body>
</html>

Answer 3

你的问题的答案是，你不能。样式应用于元素，并由其内容塑造。元素的文本内容没有直接设置样式，因为它只是数据。其他答案和评论只是获取元素样式的建议，而不是您要求的元素。因此，您所要求的内容无法完成，因为没有样式应用于元素的数据，文本节点。

如何获得文本节点的感知样式？

3 个答案: