set display property flex on element cross browser

css, javascript

Solution

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.

Problem

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 ?

Original source

Related problems