createTextNode() 后更改字体答案

【问题标题】：Change font after createTextNode()createTextNode() 后更改字体
【发布时间】：2011-04-05 16:49:01
【问题描述】：

我需要更改 createTextNode() 函数创建的元素的字体：

var s = document.createTextNode(item.text);
s.setAttribute("font size") = -1;
elem.appendChild(s);

在我的代码中，我在 Firebug 上遇到错误：

s.setAttribute 不是函数

如何更改已创建元素的字体？

【问题讨论】：

标签： javascript html dom

【解决方案1】：

您没有在 文本节点 上指定字体，而是在父元素上指定字体 - 在您的情况下：

elem.style.fontSize = "20px";

如果您不想更改整个父元素的字体大小，您可以创建一个<span> 元素来环绕文本节点：

var span = document.createElement('span');
span.style.fontSize = "20px";
span.appendChild(s);
elem.appendChild(span);

【讨论】：

为什么不把它包裹在另一个 div 周围？

【解决方案2】：

createTextNode 创建一个Text 节点，它只有一种方法：splitText。 setAttribute 是 DOM Core 的一种方法，由 Element 接口（即不是文本节点）实现。

通常，您应该避免使用 setAttribute，因为它有很多怪癖，并且设置相关的 DOM 属性更快、更可靠。

无论如何，HTML 4.01 中没有为文本节点指定“fontSize”属性，因此您不能指望浏览器实现它。文本节点从其父元素继承样式，因此如果要设置某些文本的字体大小，请将其包装在一个元素中：

window.onload = function() {
  var span = document.createElement('span');

  // Set DOM property
  span.style.fontSize = '200%';
  span.appendChild(document.createTextNode('hey'));

  // Add to document
  document.body.appendChild(span);
};

但一般来说，您最好在类中定义样式并将其附加到跨度。

【讨论】：

【解决方案3】：

也许你可以使用内联 CSS。从未尝试过使用 textnode 进行此操作

setAttribute('style', 'font-size:-1;');

【讨论】：