在createTextNode()之后更改字体

Question

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

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

在我的代码中,我在Firebug上收到错误:

s.setAttribute不是一个函数

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

Answer 1

您没有在文本节点上指定字体,您在父元素上执行此操作- 在您的情况下:

elem.style.fontSize = "20px";

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

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

Answer 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);
};

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