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

本文介绍了如何获得文本节点的感知样式？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

方法只接受元素节点。 是否有任何方法可靠地获得决定文本节点视觉表示形式的风格？

我知道节点不能有使用 / code>，并存储标签名称和样式信息。

使用存储的标签名称创建一个新元素，并通过<$ c

添加一个子元素< foo> 元素（严格来说，应该是当前CSS规则中未提及的标签名称，以免影响它）。

将父元素附加到< ;头文件> （Webkit-specifici c）。

在子元素上使用 window.getComputedStyle（）。

设置 inline 作为显示属性的值（因为文本节点始终内联）。

请注意代码段的结果。尽管父母有一个左边距， 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'，'显示：inline;'）; clone.appendChild（child）; clone.setAttribute（'style'，sourceStyle.cssText）; head.appendChild（clone）; alert（window.getComputedStyle（source）.marginLeft）; // 100pxalert（window.getComputedStyle（child）.color）; // rgb（255，0，0）; alert（window.getComputedStyle（child）.marginLeft）; // 0pxalert（window.getComputedStyle（child）.width）; // auto

.bar {color：red; margin-left：100px} < html> < HEAD> < title>示例< / title> < /头> <身体GT; < div class =bar> foo< / div> < / body>< / html>

window.getComputedStyle() method accepts only element nodes. Is there any way to reliably get the style that determines the visual representation of a text node?

I realize that nodes can't have style attributes, but they certainly are styled, since they inherit the parent element's styles. Is there, perhaps, a way to get all computed styles from the parent element that are relevant to the text node's visual representation?

Note that wrapping the node in a span is out of the question: this would affect CSS rules such as span:nth-child or span + span, etc.

解决方案

I'll give it a try myself.

Use window.getComputedStyle() on the parent element and store the tag name and the style information.
Create a new element with the stored tag name and assign the styles to it via style attribute.
Add a child <foo> element (strictly speaking, it should be of a tag name that is not mentioned in the current CSS rules, so that they don't affect it).
Attach the parent element to the <head> of the document (Webkit-specific).
Use window.getComputedStyle() on the child element.
Set inline as the value of display property (as text nodes are always inline).

Note the results of the code snippet. color is red, margin-left is zero, despite the parent having a left margin, and width (and height, too) is 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>

这篇关于如何获得文本节点的感知样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！