如何使用Javascript处理CSS中的多个样式(由于供应商前缀)？

Question

我希望用户单击按钮以显示隐藏的弹性框菜单.所以当然我知道如何处理正常的东西:

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

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

但是那个愚蠢的供应商前缀替代规则呢？以前从来没有出现过,我不知道如何处理它们.

编辑:为什么不Autoprefixer？

总之:wrap.在上面的例子中,我用过flex-flow: column nowrap;.但是,让我们说这个规则已经存在flex-flow: row wrap;.Autoprefixer只会为最近的浏览器提供修复,因为wrap旧版(但不是那么旧版)的Firefox和Safari [包括Chrome for iOS] 没有一个(不支持).

因此,如果您使用Autoprefixer,您的flex-flow: row wrap元素就会在这些浏览器上中断.根据设置,您的弹性儿童可能会直接从屏幕侧面运行.

也许你宁愿在这些情况下通过指定-webkit-box-orient: vertical甚至-moz-box-orient: vertical(现代的等价物flex-direction: column)提供替代布局.

Answer 1

您可以使用标准属性和前缀属性创建一个CSS类选择器,只需使用JavaScript将类添加到按钮单击时所需的任何元素.例如:

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选择器比类选择器更具体,所以.flexClass单独使用现有的nav#test选择器会被覆盖.