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

Question

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

sbi*_*nko 24 html javascript css

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

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

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

Answer 1

Ric*_*ock 9

如果文本节点是元素中的唯一节点,则可以简单地使用getComputedStyle()它parentNode.

但是,请考虑以下事项:

div {border: 1px solid black;}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

你不能说"这个"和"一个"都有边框.说"This"有左上角的边框,而"a"只有上下边框会不准确？这是值得怀疑的.

如果你限制自己的专门适用于文本样式(颜色,背景,textDecoration,字体等),应用getComputedStyle()上parentNode应始终工作.

真正的答案是文本节点没有任何固有的样式,所提出的问题从根本上是有缺陷的. (5认同)

Answer 2

sbi*_*nko 7

我会自己尝试一下.

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

请注意代码段的结果.虽然父母有一个左边距,而且(也是)color,margin-left所以是红色,为零.widthheightauto

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，8 月前
查看次数：	1350 次
最近记录：	10 年，8 月前