Как принудительно активировать стиль для элемента через JS?

Question

Не получается активировать стиль из JS для элемента. Если смотреть в браузере через код элемента, то стиль нормально определяется, но он не активирован т.е. не стоит галочка в стилях

Что за беда? !important не помогает

JS - код

window.onload = function() {
function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min; //Максимум и минимум включаются
}
function ChangeIt() 
{
  var first = "https://media4.giphy.com/media/fpsrZ5xDDrakHMhAfb/giphy.gif";
  var second = "https://media4.giphy.com/media/ewibTu8n0jCzrbztqy/giphy.gif";
  var elem = document.getElementsByClassName('twitch-follow')[1];
  if (elem.getElementsByClassName("tag")[0].innerText == "FOLLOW"){
   var num = getRandomIntInclusive(1,2);
   if (num == 1) 
      elem.style.background = "url("+'"'+first+'"'+") no-repeat !important";
   else
      elem.style.background = "url("+'"'+second+'"'+") no-repeat !important";
  }
    console.log("complete");
  }
  ChangeIt();
}

Answer 1

Используйте background-image вместо background

window.onload = function() {
  function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; //Максимум и минимум включаются
  }
 
  function ChangeIt() {
    var first = "https://media4.giphy.com/media/fpsrZ5xDDrakHMhAfb/giphy.gif";
    var second = "https://media4.giphy.com/media/ewibTu8n0jCzrbztqy/giphy.gif";
    var elem = document.getElementsByClassName('twitch-follow');
    if (elem[0].getElementsByClassName("tag")[0].innerText == "FOLLOW"){
       var num = getRandomIntInclusive(1,2);
       elem[0].style.backgroundImage =`url("${(num == 1 ? first: second)}")` 
    }
      console.log("complete");
  }
  ChangeIt();
}

.twitch-follow {
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  background-size: contain;
}

.tag{
  display: inline-block;
  background-color: yellow;
}

<body style="background:black">
  <div class="twitch-follow ">
    <span class="tag">
      FOLLOW
    </span>
  </div>
  <div class="twitch-follow ">
    <span class="tag">
      FOLLOW
    </span>
  </div>
</body>

либо можно настроить классы и использовать их

window.onload = function() {
  function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; //Максимум и минимум включаются
  }
  function ChangeIt() {
    var elem = document.getElementsByClassName('twitch-follow');
    if (elem[0].getElementsByClassName("tag")[0].innerText == "FOLLOW"){
       var num = getRandomIntInclusive(1,2);
       elem[0].classList.add(num == 1 ? 'first': 'second' ) 
    }
      console.log("complete");
  }
  ChangeIt();
}

.twitch-follow {
  width: 100px;
  height: 100px;
}

.first{
  display: inline-block;
  background: url("https://media4.giphy.com/media/fpsrZ5xDDrakHMhAfb/giphy.gif") no-repeat;
  background-color: yellow; 
}

.second{
  display: inline-block;
  background: url("https://media4.giphy.com/media/ewibTu8n0jCzrbztqy/giphy.gif") no-repeat;
  background-color: yellow;
}

<body style="background:black">
  <div class="twitch-follow ">
    <span class="tag">
      FOLLOW
    </span>
  </div>
  <div class="twitch-follow ">
    <span class="tag">
      FOLLOW
    </span>
  </div>
</body>

Answer 2

Можно сколько угодно к background добавлять !important и даже прописывать стили inline, но...

Пока не измените opacity, ничего не выйдет.

/* Установили фон... */
.twitch-follow .background {
  background: url(https://media4.giphy.com/media/ewibTu8n0jCzrbztqy/giphy.gif) no-repeat !important;
}
/* ... а прозрачность не выключили! */
div.background {
  opacity: 0;
}

<li class="twitch-follow">
  <div class="background">Zzz...</div>
</li>

Вы скромно умалчиваете про следующее css-правило:

Что там осталось за пределами скриншота, нам неведомо, но причина там.

БЛОГ НА HUSL

Как принудительно активировать стиль для элемента через JS?

Ответы (2 шт):