如何在 CSS 和 Javascript 中设置多个样式（由于供应商前缀）？

Question

我想让用户点击一个按钮来显示一个隐藏的 flexbox 菜单。所以我当然知道如何处理普通的东西：

nav#test {
    display: none;
    flex-flow: column nowrap;
}

document.querySelector('#test').style.display = 'flex';

但是愚蠢的 vendor-prefix 备用规则呢？我以前从来没有遇到过这种情况，我不知道如何处理它们。

编辑：为什么不使用 Autoprefixer？

一句话：wrap。在上面的例子中，我使用了flex-flow: column nowrap;。但是假设规则是 flex-flow: row wrap;。 Autoprefixer 只会为最新的浏览器提供修复，因为在较旧的（但甚至那个旧的）Firefox 和 Safari [其中包括 Chrome for iOS]。

因此，如果您使用 Autoprefixer，您的 flex-flow: row wrap 元素将在此类浏览器上中断。根据设置，您的 flex children 可能运行就在屏幕的一侧。

在这些情况下，您可能更愿意通过指定 -webkit-box-orient: vertical 甚至 -moz-box-orient: vertical（相当于现代 flex-direction: column）来提供替代布局。

Answer 1

Autoprefixer 会自动将供应商前缀添加到任何需要它的属性。

Answer 2

您可以使用标准属性和前缀属性创建 CSS class 选择器，只需使用 JavaScript 将 class 添加到任何元素你需要点击一个按钮。例如：

var navButton = document.getElementById("navControl");
navButton.addEventListener("click", showNav, false);

function showNav() {
    var nav = document.getElementById("test");
    nav.className = "flexClass";
}

nav#test {
    display: none;
    flex-flow: column nowrap;
}

#test.flexClass {
    display: flex; /* Standard for Firefox, Chrome, and Opera */
    display: -webkit-box;  /* iOS 6-, Safari 3.1-6 */
    display: -ms-flexbox;  /* IE 10 */
    display: -webkit-flex; /*  Safari 6.1+. iOS 7.1+ */
    background: lightgray;
    border: 1px solid black;
}

<button id="navControl">Show Nav menu</button>
<nav id="test">Nav menu goes here</nav>

我写了 #test.flexClass 而不是 .flexClass 因为 ID 选择器比 class 选择器更具体，所以单独 .flexClass 会被你现有的 nav#test选择器。

如何在 CSS 和 Javascript 中设置多个样式（由于供应商前缀）？

How do I handle setting multiple styles (due to vendor prefixes) in CSS with Javascript?

javascript

css

vendor-prefix

flexbox