创建元素节点、设置其属性并附加元素？

Question

我被指示为 link 元素创建一个元素节点并将其 rel 属性设置为 "styleSheet"，其 id 属性为 "fancySheet"，其 href 属性为 "na_style_num.css"（其中 num 是 styleNum 变量的值）。

然后它要我将 fancySheet 样式元素附加到文档头部。

我觉得我真的离这里很近或很远。这是我在没有运气的情况下尝试过的：

na_styler.js:

window.addEventListener("load", setStyles);

function setStyles() {
   var styleNum = randInt(5);
   var styleNum = document.createElement("link");
   styleNum.setAttribute("rel", "stylesheet");
   styleNum.setAttribute("id", "fancySheet");
   styleNum.setAttribute("href", "na_style_" + styleNum + .css);
   document.head.appendChild(styleNum);
}

我收到了一些错误，但问题是它是以我无法真正理解的形式编写的。例如：

" 回溯（最近调用最后）：文件 "nt-test-3ed2ebdf.py"，第 14 行，在 assert(link.get_attribute('id') == 'fancySheet'), 'The id attribute should be set to "fancySheet". Actual: "' + str(link.get_attribute('id')) + '"' AssertionError：id 属性应设置为 "fancySheet"。实际值："" "

Answer 1

在行 styleNum.setAttribute("href", "na_style_" + styleNum + .css); 中将 .css 括在引号中，因为它是一个字符串而不是变量名。

styleNum.setAttribute("href", "na_style_" + styleNum + '.css');

window.addEventListener("load", setStyles);

function setStyles() {
   var styleNum = randInt(5);
   var styleEle = document.createElement("link");
   styleEle.setAttribute("rel", "stylesheet");
   styleEle.setAttribute("id", "fancySheet");
   styleEle.setAttribute("href", "na_style_" + styleNum + ".css");
   document.head.appendChild(styleNum);
}

Answer 2

您为两个变量使用了相同的名称。因为它们是用 var 声明的，所以它不会抛出错误。第二个将覆盖第一个。

只需更改其中一个变量的名称

同时将 .css 包裹在 ""

中

window.addEventListener("load", setStyles);

function setStyles() {
   var styleNum = randInt(5);
   var styleElm = document.createElement("link");
   styleElm.setAttribute("rel", "stylesheet");
   styleElm.setAttribute("id", "fancySheet");
   styleElm.setAttribute("href", "na_style_" + styleNum + ".css");
   document.head.appendChild(styleElm);
}

Answer 3

随机生成的数字意味着与元素节点分开存储在变量中。由于您使用 styleNum 作为两个变量的名称，首先将生成一个随机数并将其存储在 styleNum 中，然后将创建新的元素节点并覆盖随机生成的数字，由于变量无法存储，该数字现在将永远丢失两个不同的值。为避免这种情况并保留随机数以供稍后在函数中使用，您必须将正在创建的元素节点命名为 styleNum

以外的任何名称

下面是避免这种情况的代码示例：

function setStyles() {
   var styleNum = randInt(5);
   var styleElementNode = document.createElement("link");
   styleElementNode.setAttribute("rel", "stylesheet");
   styleElementNode.setAttribute("id", "fancySheet");
   styleElementNode.setAttribute("href", "na_style_" + styleNum + ".css");
   document.head.appendChild(styleElementNode);
}

另请注意我是如何在 .css 周围添加 " " 并将 styleNum 更改为最后一行函数参数中的 styleElementNode 的。这是因为该函数的目的是将创建的元素节点而不是随机生成的数字附加到文档头部。

创建元素节点、设置其属性并附加元素？

Creating an element node, setting its attributes, and appending the element?

html

javascript

appendchild

createelement