Javascript применять разные стили к одному и тому же элементу на основе медиазапроса - PullRequest
Новая
       5

Javascript применять разные стили к одному и тому же элементу на основе медиазапроса

0 голосов
/ 03 марта 2020

С помощью javascript возможно ли изменить стиль элемента отдельно в CSS медиа-запросах?

В частности, у нас есть изображение героя, которое использует два разных изображения в зависимости от размера экрана. Мы пишем скрипт загрузки страницы, который загружает видимое содержимое следующей страницы без изменения части веб-страницы stati c. При следующей загрузке страницы мы хотим менять оба значения новыми изображениями каждый раз, когда загружаем новое содержимое страницы. 

// code when page initially loaded    
#splash {
  background-image: url("1st-phone-img.jpg");
}
@media only screen and (min-width: 501px) {
  #splash {
    background-image: url("1st-fullsize-img.jpg");
  }
}

. 

// when page 2 content loaded, need to change css to use two new images
#splash {
  background-image: url("2nd-phone-img.jpg");
}
@media only screen and (min-width: 501px) {
  #splash {
    background-image: url("2nd-fullsize-img.jpg");
  }
}

Я знаю, что могу сделать c нацеливание с помощью document.getElementById('splash').style.backgroundImage = "url(2nd-phone-img.jpg)';, но есть ли способ нацелить значение 501px + с другим изображением?

Или мне нужно настроить таргетинг на все внутри тегов <style></style> для замены текста (если это даже возможно)?

--- Редактировать с дополнительной информацией ---

Мои извинения, но я не кодер, просто кто-то, кто поддерживает один сайт для моего маленького бизнес и, очевидно, не объяснил мой вопрос четко.

Я считаю, что один из терминов, которые мы делаем, это гидратация страницы Мы загружаем стати c html страницу и затем вместо перезагрузки следующей страницы целиком, мы используем javascript для извлечения только содержимого, которое изменяет и заменяет его, оставляя структуру, нижний колонтитул, навигацию, et c с первой загруженной страницы.

Одно из изменений - изображение героя, которое, как показано выше, использует два разных изображения в зависимости от устройства. Мне нужно изменить CSS фоновые изображения, так как некоторые устройства пересекаются, по вертикали они используют изображение телефона, по горизонтали - полное изображение.

- - - Еще одна попытка объяснить - - -

У меня есть div, который использует два разных фоновых изображения, определяемых через CSS на основе ширины устройства. С vanilla javascript и после загрузки страницы я хочу иметь возможность изменять ОБА значения фонового изображения. Использование style.backgroundImage изменяет только видимое в данный момент изображение, а не альтернативу, которая будет использоваться, когда посетитель меняет ориентацию планшета.

Ответы [ 3 ]

0 голосов
/ 03 марта 2020

Мы можем использовать window.resize метод 

function getWindowSize() {
    var inner_width = window.innerWidth;
}

window.onresize = getWindowSize;

if(inner_width >= 501){
   document.getElementById('spash').style.backgroundImage: url("fullsize-img.jpg");

}
0 голосов
/ 03 марта 2020

Если вы говорите, что хотите изменить изображение с размером окна с помощью CSS media-запросов, то написанный вами код верен, но вместо установки минимальной ширины измените его на max-width , поэтому, если ширина окна меньше '501px', тогда в медиа-запросах установите это изображение как URL-адрес фонового изображения "phone-img.jpg", а если ширина окна больше, чем "501px", тогда установите это вне медиа-запроса как URL-адрес фонового изображения "fullsize-img.jpg". Вот идентификатор вашего кода. 

#splash {
  background-image: url("fullsize-img.jpg");
}
@media only screen and (max-width: 501px) {
  #splash {
    background-image: url("phone-img.jpg");
  }
}

Но одна важная вещь - вам нужно указать высоту и ширину тега, для которого вы используете фоновое изображение, и URL-адрес фонового изображения не работает с тег span, тег div рекомендуется 

<div id="splash" style="height:500px; width: 500px"></div>
0 голосов
/ 03 марта 2020

Если вам нужны разные изображения в зависимости от размера экрана, то медиа-запросы - это путь к go. 

@media only screen and (max-width: 500px)
    #splash {
      background-image: url("phone-img.jpg");
    }
  }
@media only screen and (min-width: 501px) {
  #splash {
    background-image: url("fullsize-img.jpg");
  }
}

Если вы хотите сделать это из кода, вы можете использовать обработчик события resize. 

window.addEventListener('resize', () =? {
  if(window.innerWidth < 501) {
    document.querySelector('#spash').style.backgroundImage = 'url("phone-img.jpg")';
  } else {
    document.querySelector('#spash').style.backgroundImage = 'url("fullsize-img.jpg")';
  }
});
...