組顯示屬性撓曲元件上跨瀏覽器

何可以我設置這些屬性：組顯示屬性撓曲元件上跨瀏覽器

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

在與JavaScript的元件。我通常不喜歡它這樣：

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

element.style.display = "flex";

但有關的屬性外其餘什麼，我能做什麼應用這些？

來源

2013-07-27 Roland

做同樣的事情，爲每個添加相同的行，但替換其他屬性的'flex'？ – putvande

這不會覆蓋我剛剛應用的以前的樣式嗎？我不應該首先獲得計算的樣式，然後添加？ – Roland

@putvande這不是一個好主意，只有最後一個纔是'display'的值。 – Teemu

你可以這樣下發展的代碼段進一步：

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中測試了這個。

A live demo at jsFiddle。

來源

2013-07-27 11:33:08 Teemu

啊是的，我做了一個不同的錯誤。對不起，我會刪除評論。謝謝！ – vinni

-1

怎麼樣添加CSS中：

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

，然後添加一個類「.flexbox」的元素類似這樣的主題中說：

How do I add a class to a given element?

來源

2013-07-27 10:43:21 isThisLove

我不打算在這個特殊情況下使用一個班級 – Roland

組顯示屬性撓曲元件上跨瀏覽器

回答

相關問題