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

Most efficient way to set style using pure javascript?

本文关键字：有效 方法 样式 设置 javascript      更新时间：2023-09-26

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

几乎可以使用堆叠赋值：

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

由于我们有几个特定于供应商的版本，因此您可以考虑使用可重复使用的函数来实现这一点，例如：

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都是函数范围内的，因此在函数内的非函数块中声明var（稍微）会误导代码的读者；详细信息：可怜的、被误解的var

你可以试试这个：

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

不需要每次循环时都设置v = 'opacity 1s'，只需在循环之前设置一次即可。只要我们移动v的声明，请注意JS只有函数范围，所以在循环中声明变量实际上并不会将其范围限制在该循环中。

可能在函数中：

function setStyles(styles, element, value)
{
    for(var i=0,l=styles.length;i<l;i++)
        {
            if(p in element.style)
                element.style[p] = value;
        }
    };
}

所以你可以打电话给：

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