Блог

Главная - Вопросы по программированию - Измените стиль в зависимости от агента пользователя браузера

Измените стиль в зависимости от агента пользователя браузера

#javascript #css #cross-browser

Вопрос:

Я чувствую, что действительно близок к тому, чтобы это было правильно, но, похоже, это не работает. Кто-нибудь, пожалуйста, может мне помочь?

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

Комментарии:

1. Извините, я немного изменил, так и должно быть . В нижнем регистре

2. Хорошо, я постараюсь лучше объяснить, что я пытаюсь сделать: этот код пытается выбрать объект с помощью идентификатора is и добавить класс в is на основе браузера, в котором он просматривается. OPR-это агент для браузера Opera, а #evs-идентификатор изображения, в котором я пытаюсь перемещаться.

3. да, но разве я не могу выбрать браузер по имени или агенту пользователя? Он по-прежнему появляется как версия Opera 73

4. Таким образом, проблема, с которой я все еще сталкиваюсь, заключается в том, что изображение, о котором идет речь, не отображается в Opera или Chrome сейчас, когда я добавляю этот код. И я не могу понять, почему…

5. Похоже, что класс не добавляется к изображению с помощью этого кода. <img id="evs" class="" src="sources/housekeeping/evs_dark.png" height="247" width="554px">

Ответ №1:

  • Сначала вы используете .toLowercase() , но пытаетесь сопоставить символы верхнего регистра: 'OPR' , 'Chrome'
  • jQuery .addClass() ожидает строку имени класса (без точки), например: $("#evs").addClass("chrome"); — то же самое относится к методу classList.add() JS:

Вот мое предложение:

 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>
Метки: