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

Question

我被指示为链接元素创建一个元素节点，并将其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') 中，'该id属性应设置为 "fancySheet" ". 实际："' + str(link.get_attribute('id')) + '"' AssertionError: 该id属性应设置为 "fancySheet"。实际："" "

Answer 1

您对两个变量使用了相同的名称。因为它们是用声明的，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 2

行内用引号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 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。这是因为该函数旨在将创建的元素节点而不是随机生成的数字附加到文档头。