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的正确方法（更恰当地称为＆＃34; style＆＃34;）：

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样式，因为赋予它们样式的操作在创建之前完成，并且这些操作仅适用于现有元素。

创建元素，附加类和分配子元素

1 个答案: