创建元素，追加类和分配儿童

我在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

创建元素，追加类和分配儿童

回答

相关问题