如何在javascript中动态转换诸如"select：：-ms-expand"之类的css？

Question

我有以下代码，我想在类似"$('select').css('-moz-appearance','none');"的javascript代码中使用。我通过谷歌搜索了一些解决方案，但找不到方法。一些技巧或例子会很棒！我很想听听你的消息。

<style>
select::-ms-expand {
display: none;
}
select {
-moz-appearance: none;
}
</style>

Answer 1

问题是::-ms-expand是伪元素，因此从技术上讲，在DOM中不存在。对于不需要任何CSS支持的JavaScript解决方案，您唯一的选择是通过JavaScript的addRule:将所需规则动态注入样式表

$('select').css('::-ms-expand', 'none');
if (navigator.appVersion.indexOf("MSIE") !== -1 || navigator.appVersion.indexOf("Trident") !== -1) {
document.styleSheets[0].addRule('select::-ms-expand', 'display: none;');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option>1</option>
</select>

请注意，添加该规则将在Chrome和Firefox上发出警告，但在Internet Explorer中有效。因此，您还应该通过检查navigator.appVersion中的MSIE和Trident来确认用户正在运行Internet Explorer。

希望这能有所帮助！：)