根据浏览器userAgent更改样式

Question

我觉得我真的很接近这一点，但它似乎不起作用。有人能帮帮我吗？

var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf('OPR') != -1) {
if (userAgent.indexOf('Chrome') > -1) {
//browser is chrome
$("#evs").addClass(".chrome");
} else {
//browser is opera, add css
$("#evs").addClass(".opera");
}
}

Answer 1

• 首先使用.toLowercase()，但尝试匹配大写字符：'OPR'、'Chrome'
• jQuery的.addClass((需要一个className字符串(不带点(，如：$("#evs").addClass("chrome");-JS的classList.add((方法也是如此：

这是我的建议：

const UA = navigator.userAgent;
const EL_evs = document.querySelector("#evs");
if (/Chrome//i.test(UA)) {       // Case insensitive (i) if needed?
if (/OPR//.test(UA)) {         // Case sensitive
EL_evs.classList.add("UA-opera");
} else if (/Edg//.test(UA)) {  // Case sensitive
EL_evs.classList.add("UA-edge");
} else {
EL_evs.classList.add("UA-chrome");
}
}

.UA-chrome { background: gold; }
.UA-edge   { background: blue; }
.UA-opera  { background: red; }

<div id="evs">TEST</div>