我如何处理使用 Javascript 在 CSS 中设置多个样式(由于供应商前缀）

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

本文关键字：样式 设置 前缀 供应商 何处理 处理 Javascript CSS      更新时间：2023-09-26

我希望用户单击一个按钮来显示隐藏的弹性框菜单。所以我当然知道如何处理正常的事情：

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

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

但是愚蠢的供应商前缀替代规则呢？这以前从未出现过，我不知道如何处理它们。

编辑：为什么不是自动前缀？

一句话：wrap.在上面的例子中，我使用了flex-flow: column nowrap;.但是，假设规则已经flex-flow: row wrap;。Autoprefixer只会为你修复最近的浏览器，因为在较旧的（但甚至不是那么旧的）Firefox和Safari（包括Chrome for iOS）上没有（没有wrap支持）。

因此，如果您使用自动前缀器，您的 flex-flow: row wrap 元素只会在此类浏览器上中断。根据设置，您的弹性子项可能会在屏幕一侧直接运行。

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

您可以使用标准属性和前缀属性创建一个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选择器覆盖。

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

相关文章：