Question

我正在使用querySelector来更改某些元素的样式。

对于某些样式，不同的浏览器有不同的版本。在这种情况下，fit-content用于Chrome浏览器，-moz-fit-content用于Mozilla。

如果我想在Chrome上运行，代码如下：

document.querySelector('.my-element').style.height = "fit-content";

对于Mozilla：

document.querySelector('.my-element').style.height = "-moz-fit-content";

我的问题是：有没有办法将它们结合起来？通过上述工作方式，它一次只能在一个浏览器上运行良好，我希望两者都能运行良好。

Answer 1

鉴于可能的答案范围较大，不可预测（且可变），应避免浏览器检测/嗅探。

在CSS中定义包含所需前缀的类，并将该类添加（或替换）到元素MDN: className中。 JavaScript将是一条语句，添加一个已经列出了所有供应商前缀的类。

.anotherclass {
    height: -moz-fit-content;
    height: -webkit-fit-content;
    height: fit-content;
}

document.querySelector('.my-element').className = 'anotherclass';

如果您愿意，也可以使用PrefixR之类的工具或类似工具在样式表中添加前缀。

还值得指出的是Can I use，以检查是否还需要一些前缀。

Answer 2

可以使用navigator.appCodeName选择要拥有的style.height。

例如：

if(navigator.appCodeName == "Mozilla"){
    document.querySelector('.my-element').style.height = "-moz-fit-content";
}else{
    document.querySelector('.my-element').style.height = "fit-content";
}

“ Mozilla”是Chrome，Firefox，IE，Safari和Opera的应用程序代码名称。

Answer 3

这可能会有所帮助，您可以检测以下浏览器

window.browser = (function () {
    return window.msBrowser ||
        window.browser ||
        window.chrome;
})();
console.log(window.browser);

如何为不同的浏览器组合相同的CSS样式

3 个答案: