如何将一些样式应用于 JavaScript 的“节点”对象

Posted 2023-03-05

【中文标题】如何将一些样式应用于 JavaScript 的“节点”对象

【英文标题】：How can I apply some style to JavaScript's "node" object

【发布时间】：2012-11-16 13:22:39

【问题描述】：

想象一下，我有如下几个陈述：

var n1 = oDiv.firstChild;
var n2 = oDiv.lastChild.previousSibling.firstChild; //know this crazy, but for knowledge sake

如何应用如下的各种样式（通常仅适用于“元素”类型而不适用于“节点”类型）：

//does not work
n1.style.borderWidth = "1px";
n1.style.borderColor = "#336699";
n2.style.borderStyle = "solid";

另外，有没有办法在 javascript 中将“节点”类型转换为“元素”？

更新：

上面我要完成的代码在这里http://jsfiddle.net/anthachetta/4mXrd/

【问题讨论】：

java中将节点类型转换为元素是什么意思？

如果我可以在 JavaScript 中将“节点”对象转换为“元素”对象..

不，你不能，而且它与 JavaScript 完全没有关系。您正在使用本机浏览器对象，而它们所做的基本上是一成不变的。

哦。将样式应用于“节点”对象怎么样？

就像Object.style.background="color image repeat attachment position" 确保你的对象真的被加载了

【参考方案1】：

DOM 的工作方式与 html 完全相同。这是有道理的，因为 DOM 旨在将 HTML 建模为对象。那么，如果您想将以下内容加粗，该怎么办：

Hello World

从您的代码中，您尝试做的是这样的事情：

style=font-weight:bold Hello World

显然这行不通，因为它不是有效的 HTML。你通常会这样做：

<span style='font-weight:bold;'>Hello World</span>

所以你需要在 DOM 中做同样的事情：

// Assume you have a div "div" and the first child
// is the text node "Hello World"

var hello_world = div.firstChild;

// Now, you want to make Hello World bold.
// So you need to create a span:

var span = document.createElement('span');
span.style['font-weight'] = 'bold';

// Now wrap hello_world in the span:

span.appendChild(div.removeChild(hello_world));

上面是实际工作的 DOM 代码，可以满足您的需求。但请注意：

符合标准的浏览器也将空白视为节点。 IE 不将空格算作节点。

例如，如果您的 HTML 如下所示：

<div>
    <span>Hi</span>
</div>

标准规定您的 DOM 必须如下所示：

div +
    |---- text node (whitespace)
    '---- span +
               '---- text node (Hi)

但 IE 做了大多数人可能期望的事情：

div +
    '---- span +
               '---- text node (Hi)

这意味着你不能盲目地信任node.firstChild，而不检查它是否是你所期望的。

【讨论】：

感谢您的回复。这真的很有意义。您现在可以将我的问题级别为 0（因为它是-1）。我希望我的问题仍然有效。

【参考方案2】：

有一些问题。

lastChild.previousSibling.firstChild 乱七八糟是怎么回事？所有这些都让你感到困惑。

那一堆乱七八糟的属性返回给你的是一个文本节点，而不是一个元素。

lastChild 给你"a line"，previousSibling 得到<i> 标签，然后firstChild 返回"just"。您正在尝试将样式应用于文本节点，这是您无法做到的，您需要为元素设置样式。

您正在尝试将样式应用于nodeValue。那是一个字符串。您可以使用parentNode 从文本节点获取<i> 标记。

oDiv.lastChild.previousSibling.firstChild.parentNode.style.color = "#FF0000";

演示：http://jsfiddle.net/NTICompass/4mXrd/2/