Most efficient way to set style using pure javascript?

Question

What is the most efficient way to set multiple styling on elements in 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;
};

If v is static, I would use a class and only add the class to the element. — Felix Kling
– Felix Kling, Commented Jan 5, 2012 at 13:31
FelixKling, good point! In this case I will not have acess to CSS files :) — Hakan
– Hakan, Commented Jan 5, 2012 at 13:34

T.J. Crowder · Accepted Answer · 2012-01-05 13:47:46Z

6

Pretty much that, you could use a stacked assignment:

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

Since there are several of these properties where we have vendor-specific versions, you might consider a reusable function that does this, e.g.:

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

Or using the dashed style instead, since we're already using strings rather than identifiers:

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

Then:

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

Side notes:

There's no ; after the closing } in a for statement.
var anywhere in a function is function-wide, so declaring var within non-function blocks inside the function is (slightly) misleading to the reader of the code; details: Poor, misunderstood var

edited Jan 5, 2012 at 13:47

answered Jan 5, 2012 at 13:31

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hakan Over a year ago

That was something new for me!

T.J. Crowder Over a year ago

@Hakan: A stacked assignment? Yeah, it's pretty useful. It's a consequence of the fact that the expression b = c has a value (the value of the expression is the value of c), so in a = b = c, first the b = c expression is evaluated, and then a = (value of result) is evaluated. Note that the value of the far right-hand side is only taken once, so for instance a = b = func(); only calls func once, and its return value is assigned to b, then the value of that assignment expression is assigned to a. Details: Spec section 11.13.1.

nnnnnn · Accepted Answer · 2012-01-05 13:36:17Z

2

You could try this:

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

There's no need to set v = 'opacity 1s' every time you go through the loop, just set it once before the loop. And as long as we're moving the declaration of v note that JS only has function scope so declaring variables in a loop doesn't actually limit their scope to that loop.

answered Jan 5, 2012 at 13:36

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

2 Comments

Hakan Over a year ago

Of Course nnnnnn, missed that in my example... Is it necessary to declare "i"?

nnnnnn Over a year ago

Any variable that you don't explicitly declare with var will become a global variable. This can cause hard-to-find bugs, e.g., if inside your for loop you called a function that used i as well.

bardiir · Accepted Answer · 2012-01-05 13:38:01Z

0

Maybe in a function:

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

So you can call:

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

answered Jan 5, 2012 at 13:38

bardiir

14.8k9 gold badges45 silver badges66 bronze badges

Collectives™ on Stack Overflow

Most efficient way to set style using pure javascript?

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related