如何获得文本节点的感知样式
How do I get the perceived styling of a text node?
window.getComputedStyle()方法只接受元素节点是否有任何方法可以可靠地获得确定文本节点视觉表示的样式
我意识到节点不能具有style
属性,但它们肯定是样式化的,因为它们继承了父元素的样式。是否有一种方法可以从父元素中获取与文本节点的视觉表示相关的所有计算样式
请注意,将节点封装在span
中是不可能的:这将影响CSS规则,如span:nth-child
或span + span
等。
如果文本节点是元素中仅有的节点,则可以简单地在其parentNode
上使用getComputedStyle()
。
但是,请考虑以下内容:
div {border: 1px solid black;}
<div>This <em>is</em> a <strong>test</strong></div>
你不能说"这个"answers"一个"都有边界。说"This"有左上下边框,而"a"只有上下边框是否准确?这是值得怀疑的。
如果您将自己限制为专门应用于文本的样式(颜色、背景、textDecoration、字体等),则在parentNode
上应用getComputedStyle()
应该始终有效。
我自己试试。
- 在父元素上使用
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>
你的问题的答案是,你不能。样式应用于图元,并根据其内容进行造型。元素的文本内容不直接设置样式,因为它只是数据。其他答案和评论只是获得元素样式的建议,而这不是你所要求的。因此,您所要求的无法实现,因为没有对元素的数据(文本节点)应用样式。
相关文章:
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 将样式表插入iframe
- 跟踪在页面加载时应用内联样式的JavaScript
- 如果文本字段为空,则使用JavaScript应用CSS样式
- 定义完全独立的样式信息
- W3C循环样式的JavaScript
- jQuery/JavaScript在线公文包表单-打印样式表
- 使用递归、Ramda.js和无点样式重构字符串的getPermutations()
- FF和Chromium中CSS样式按钮的外观差异
- 如何首先设置样式<td>表中包含在窗体中的元素
- javascript问题正文样式
- 使用具有内联样式的tidy-html5
- DataTables-创建自定义分页样式(加载更多样式)
- 具有所有样式的文本正在复制到可编辑文本区域
- 如何提供在javascript中编写对对象的重复访问以设置元素样式的简写
- 绑定Range输入以修改样式
- 一个正则表达式,用于从JS中的HTML标记中删除id、样式和类属性
- 不同页面背景的body标记上的角度ng样式
- 列表样式在IE中未设置为none,但在IE中适用
- 如何获得文本节点的感知样式