javascript - 在元素跨浏览器上设置显示属性 flex

Question

何我可以设置这些属性：

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

在带有 javascript 的元素上。我通常这样做：

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

element.style.display = "flex";

但是那里的其他属性呢，我能做些什么来应用这些属性呢？

Answer 1

您可以进一步开发此代码段：

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

这个想法是，这window.getComputedStyle()不会返回无效值。检查也可以放在while条件中，但在for循环中进行可能是最安全的。我在 Chrome28、FF22 和 IE10 中对此进行了测试。

jsFiddle 的现场演示。

Answer 2

添加css怎么样：

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

然后像本主题中所说的那样向元素添加一个类“.flexbox”：

如何将类添加到给定元素？