根据浏览器 userAgent 更改样式答案

【问题标题】：Change style depending on browser userAgent根据浏览器 userAgent 更改样式
【发布时间】：2021-07-12 20:30:24
【问题描述】：

我觉得我真的很接近这是正确的，但它似乎不起作用。有人可以帮我吗？

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");
  }
}

【问题讨论】：

对不起，我改了位，应该是 .toLowerCase
好的，我将尝试更好地解释我正在尝试做的事情：此代码试图通过 is ID 选择一个对象，并根据正在查看的浏览器向 is 添加一个类in. OPR 是 Opera 浏览器的代理，#evs 是我要在其中移动的图像的 ID。
是的，但我不能通过名称或 userAgent 选择浏览器吗？它仍然作为 Opera 版本 73 出现
所以我仍然遇到的问题是，当我添加此代码时，有问题的图像现在没有显示在 Opera 或 Chrome 中。而且我不知道为什么......
使用此代码似乎没有将类添加到图像中。 <img id="evs" class="" src="sources/housekeeping/evs_dark.png" height="247" width="554px">

标签： javascript css cross-browser

【解决方案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; }

&lt;div id="evs"&gt;TEST&lt;/div&gt;

【讨论】：