創建元素，追加類和分配兒童

我在jQuery中有這段代碼，但希望將其轉換爲純javascript。如您所知，jQuery允許您通過選項和方法輕鬆創建一個元素。創建元素，追加類和分配兒童

想知道在沒有外部庫的情況下嘗試和實現這個最好的方法是什麼。

jQuery的：

var color = 'red'; 
var overlay = document.getElementById('load'); 
var rgb = hexToRgbA(color); 

var percentage = $("<div>") 
    .html("<span></span>") 
    .css({ 
    color: color, 
    "border-color": rgb 
     ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.7)` 
     : color 
    }) 
    .addClass("loader") 
    .appendTo(overlay); 

percentage.children("div").css("border", color);

純JavaScript嘗試到目前爲止：

var color = 'red'; 
var overlay = document.getElementById('load'); 
var rgb = hexToRgbA(color); 


var percentage = document.createElement("div"); 
    percentage.innerHTML = "<span></span>"; 
    percentage.color = color, "border-color": rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.7)` : color; 
    addClass(percentage, "loader"); 

    function addClass(el, className) { 
    if (el.classList) 
     el.classList.add(className) 
    else if (!hasClass(el, className)) el.className += " " + className 
    }

來源

2017-07-23 Sophie Rhodes

什麼是'addClass'？這不是你如何改變CSS，使用'percentage.style.color'，這不是你如何設置多個CSS規則。 – Li357

Addclass是一個單獨的函數 - 編輯回覆 –

爲什麼不總結你到目前爲止還有什麼仍然失蹤？所以你可以確切地要求你無法做到的部分。 – lilezek

編輯在JavaScript中的CSS正確的方式（更恰當地稱爲「style」）：

percentage.style.color = color; 
percentage.style.borderColor = rgb ? ... : color;

要append到DOM：

// parent.appendChild(child); 
overlay.appendChild(percentage);

由於percentage是一個新創建的元素，它不會有任何階級歸屬。所以，你也可以使用setAttribute添加類：

// element.setAttribute(attribute, className); 
percentage.setAttribute('class', 'loader');

至於children部分，有一個children屬性，你可以使用。但是，在IE8及以下版本中這有點棘手。

在你的情況，不過，你可能不需要這個children屬性，可以使用getElementByTagName找到從父所有div元素：

percentage.getElementsByTagName('div');

然而，上面會返回一個數組類HTMLCollection。所以，你不能只是編輯自己的風格，如：

percentage.getElementsByTagName('div').style.borderColor = ...

相反，你應該把它像一個array：

var child = percentage.getElementsByTagName('div'), 
    i = 0, 
    len = child.length; 

/* SOLUTION 1 - A simple for loop */ 

for (; i < len; i++){ 
    child[i].style.borderColor = color; 
} 

/* SOLUTION 2 - Borrowing Array constructor's function to use on HTMLCollection constructor*/ 

Array.prototype.forEach.call(child, function(el){ 
    el.style.borderColor = color; 
});

不過，從給定的代碼來看，我不認爲有任何div元素在percentage之內。

~~請記住，在純Javascript中，與jQuery不同，元素集合是not live。一旦集合被引用，意味着即使創建了符合集合標準的新元素，它也不會自行更新。~~

所以，percentage.children("div").css("border", color)不能完全翻譯成純JavaScript，因爲新div追加到percentage不會得到borderColor = color風格（因爲他們沒有住）。您將需要每次手動設置新的div。

原來在certain situations they are live。

但是，新創建的div不會獲得css樣式，因爲給它們樣式的操作在創建之前完成，而這些操作僅適用於現有元素。

來源

2017-07-23 16:11:20

創建元素，追加類和分配兒童

回答

相關問題