javascript - 使用纯 javascript 设置样式的最有效方法？

Question

在 javascript 中为元素设置多个样式的最有效方法是什么？

for (i=0;i<=lastSelector;i++) {
var e = mySelector[i],
v = 'opacity 1s';
e.style.WebkitTransition = v;
e.style.MozTransition = v;
e.style.OTransition = v;
e.style.MsTransition = v;
e.style.transition = v;
e.style.opacity = 0;
};

Answer 1

几乎可以，您可以使用堆叠分配:

for (i=0;i<=lastSelector;i++) {
  var e = mySelector[i];
  e.style.WebkitTransition =
    e.style.MozTransition =
      e.style.OTransition =
        e.style.MsTransition =
          e.style.transition =
            'opacity 1s';
  e.style.opacity = 0;
}

由于其中有几个属性我们有特定于 vendor 的版本，您可能会考虑执行此操作的可重用函数，例如:

function setMultiVendorProp(style, propName, value) {
    // Set the non-vendor version
    style[propName] = value;

    // Make first char capped
    propName = propName.substring(0, 1).toUpperCase() + propName.substring(1);

    // Set vendor versions
    style["Webkit" + propName] = value;
    style["Moz" + propName] = value;
    style["O" + propName] = value;
    style["Ms" + propName] = value;

    // Done
    return value;
}

或者改用虚线样式，因为我们已经在使用字符串而不是标识符:

function setMultiVendorProp(style, propName, value) {
    // Set the non-vendor version
    style[propName] = value;

    // Set vendor versions
    style["-webkit-" + propName] = value;
    style["-moz-" + propName] = value;
    style["-o-" + propName] = value;
    style["-ms-" + propName] = value;

    // Done
    return value;
}

然后:

for (i=0;i<=lastSelector;i++) {
  var e = mySelector[i];
  setMultiVendorProp(e.style, "transition", "opacity 1s");
  e.style.opacity = 0;
}

---

旁注:

• 在 for 语句中结束 后没有 ;。
• var 函数中的任何地方都是function-wide，因此在函数内部的非函数 block 中声明 var 是(轻微)误导给代码的读者；详情:Poor, misunderstood var