set display property flex on element cross browser

Question

Ho can I set these properties:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

On an element with javascript. I usually do it like so:

var element = document.getElementById("#element")

element.style.display = "flex";

But what about the rest of the properties in there, what could I do to apply those ?

Do the same, add the same lines for each but replace `flex` for the other properties? — putvande, Jul 27 '13 at 10:42
Won't that overwrite the previous styles I just applied ? Shouldn't I get the computed styles first and then add ? — Roland, Jul 27 '13 at 10:42
@putvande That's not a good idea, only the last one would be a value of `display`. — Teemu, Jul 27 '13 at 10:44

score 4 · Accepted Answer · answered Jul 27 '13 at 11:33

You can develope this code snippet further:

var elem = document.getElementById('id_of_element_to_check'),
    dispValue = ['-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex'],
    n;      
for (n = 0; n < dispValue.length; n++) {
    elem.style.display = dispValue[n];
    if (window.getComputedStyle(elem, null).display === dispValue[n]) {
        break;
    }
}

The idea is, that window.getComputedStyle() won't return invalid values. The check can be also put in a while condition, but maybe it's safest to do within a for loop. I tested this in Chrome28, FF22 and IE10.

A live demo at jsFiddle.

ah yes, i did a different mistake. Sorry, I'll delete the comment. Thanks! — vinni, Mar 14 '17 at 11:30

score -1 · Answer 2 · edited May 23 '17 at 12:22

-1

What about adding in css :

.flexbox{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

And then adding a class ".flexbox" to the element like said in this topic :

How do I add a class to a given element?

edited May 23 '17 at 12:22

Community

1
1

answered Jul 27 '13 at 10:43

isThisLove

269
2
4

I'm not going to use a class for this particular case – Roland Jul 27 '13 at 10:44

set display property flex on element cross browser

2 Answers2