根据浏览器 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() 需要一个类名字符串（ 没有点 ），例如：$("#evs").addClass("chrome"); - JS 的 [=33] 也是如此=]() 方法：

这是我的建议：

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>

根据浏览器 userAgent 更改样式

Change style depending on browser userAgent

javascript

css

cross-browser