Изменение `backgroundImage` элемента во время выполнения мешает свойствам класса - PullRequest
Новая
       6

Изменение `backgroundImage` элемента во время выполнения мешает свойствам класса

0 голосов
/ 08 декабря 2018

Я изменяю свой фон div во время выполнения: 

 this.style.backgroundImage = "url('./images/back.jpg')";

Однако ранее его класс был установлен в css: 

.myMainDiv {width: 100%;height: 100%;min-height: 100vh;background-color: #000000;background-position: center;background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}

Когда у меня было изображение большего размера, это работало нормально.Однако, когда я уменьшил размеры фонового изображения, чтобы сэкономить немного памяти, он затем растянул изображение полностью по экрану, как и должно, но повторил изображение в 3 раза по высоте.

Что на землевызвало бы это?

1 Ответ

0 голосов
/ 08 декабря 2018

Этот код работает так, как вы хотите (фон был бы серым заполнителем, если бы он не обновлялся).Изображение плохого качества, потому что я попросил, чтобы оно было размером всего 120px.

Я также изменил высоту .myMainDiv, чтобы убедиться, что его высота больше заполнителя, и установил width: 120px;, чтобыместозаполнитель должен повторяться по вертикали, если background-repeat: no-repeat; не работал.

Обновление все стили были сохранены в строке, так что вы можете применять это как и когда вы хотите через JS,Это переопределит все другие стили CSS, специфичные для этого элемента (но не из классов и т. Д.), Поэтому вам нужно быть немного осторожнее. 

cssAllStyles = "min-height: 100vh; background-color: #000000; background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;"


var elements = document.getElementsByClassName('myMainDiv');
var requiredElement = elements[0];

requiredElement.style.cssText = cssAllStyles + "background-image: url('https://placeimg.com/120/120/any')";
.myMainDiv {
  width: 120px;
  height: 300px; 
  background-image: url('"https://via.placeholder.com/150');
 }
<div class="myMainDiv"></div>
...