如何在使用Javascript的CSS中处理设置多种样式（由于供应商前缀）？

我希望用户点击一个按钮来显示隐藏的Flexbox菜单。所以，我当然知道如何处理正常的东西：如何在使用Javascript的CSS中处理设置多种样式（由于供应商前缀）？

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 [其中包含适用于iOS的Chrome]。

因此，如果您使用Autoprefixer，您的flex-flow: row wrap元素只会在这样的浏览器上中断。根据设置的不同，Flex儿童可能会从屏幕边上跑出来。

也许您宁愿在这些情况下通过指定-webkit-box-orient: vertical甚至-moz-box-orient: vertical（与现代flex-direction: column等效）来提供替代布局。

来源

2016-01-14 Lee Saxon

使用所有这些属性创建一个CSS类，并将其添加到您希望单击的元素上，而不是。 – TylerH

非常简单的解决方案。谢谢！ –

@TylerH你应该打破这个答案，所以他可以接受它:) –

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

来源

2016-01-15 04:41:46 TylerH

谢谢！在我的情况下，'nav＃test'只是为了这个问题的目的，我根本没有在我的'nav'上使用ID，但我认为大多数人可能会有多个'nav'标签并且必须使用ID，所以这是一个有用的警告，我很高兴你提到。 –

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

来源

2016-01-14 23:19:55 Emily

我想给未来的人留下一个笔记，研究这个问题，为什么我没有选择这个答案。对于大多数情况，Autoprefixer可能是最有效的答案。但是，Flexbox需要更多的自定义干预。看到我的编辑更多的问题。 –

如何在使用Javascript的CSS中处理设置多种样式（由于供应商前缀）？

回答

相关问题