javascript - 创建元素、附加类并分配子元素

Question

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

Answer 1

在 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您可以使用的属性(property)。然而，在 IE8 及以下版本中这有点棘手。

不过，就您而言，您可能不需要此 children 属性，您可以使用 getElementByTagName 查找父级中的所有 div 元素:

percentage.getElementsByTagName('div');

但是，上面将返回一个类似数组的 HTMLCollection 。因此，您不能像这样编辑它们的样式:

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

相反，您应该将其视为数组:

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;
});

但是，从您给定的代码来看，我认为 percentage 内没有任何 div 元素。

请记住，在纯 Javascript 中，与 jQuery 不同，元素集合是 not live 。这意味着一旦集合被引用，即使创建了符合集合条件的新元素，它也不会自行更新。

因此，percentage.children("div").css("border", color) 无法完全翻译成纯javascript因为附加到 percentage 中的新 div 将不会获得 borderColor = color 的样式(因为它们不是实时的)。您每次都需要手动设置新 div 的样式。

结果是certain situations they are live .

但是，新创建的 div 将不会获得 css 样式，因为赋予它们样式的操作是在创建它们之前完成的，并且这些操作仅适用于当时现有的元素。