如何获得文本节点的感知样式？ [英] How do I get the perceived styling of a text node?
问题描述
window.getComputedStyle（）方法只接受元素节点。 是否有任何方法可靠地获得决定文本节点视觉表示形式的风格？
我知道节点不能有 style 属性，但它们当然是样式的，因为它们继承了父元素的样式。是否有可能从父元素中获取与文本节点的可视化表示相关的所有计算样式？
请注意，将节点包装在 span 中是不可能的：这会影响CSS规则，例如 span ：nth-child 或 span + span 等。
window.getComputedStyle（）使用 / 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>
这篇关于如何获得文本节点的感知样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
