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

Question

我有以下代码，我想在 javascript 代码中使用，例如“$('select').css('-moz-appearance','none');”。我通过谷歌搜索了一些解决方案，但找不到方法。一些提示或示例会很棒!我很想听听你的意见。

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

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

Answer 1

问题是 ::-ms-expand是 pseudo-element ，因此 technically doesn't exist in the DOM 。对于不需要任何 CSS 支持的 JavaScript 解决方案，您唯一的选择是通过 JavaScript 的 addRule 将所需规则动态注入(inject)样式表。 :

$('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 中有效。因此，您还应该通过检查 MSIE 来确认用户正在运行 Internet Explorer。和 Trident在他们的 navigator.appVersion .

希望对您有所帮助! :)