創建元素節點，設置其屬性並附加元素？

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屬性應設置為“ FantasySheet”。實際：“' + 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以外的任何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在最后一行的函數參數。 這是因為該函數旨在將創建的元素節點而不是隨機生成的數字附加到文檔頭。