Как управлять адаптивностью на самой странице без перезагрузки?

07 июля 2021, 19:10

Есть расширение для Мозиллы и Хрома Есть 2 файла CSS, назовем их style1.css и style2.css style1.css - стили для ПК версии style2.css - стили для mobile friendly Как сделать так, чтобы можно было управлять тем, какой стиль использовать?

Пример. Страница popup.html имеет 2 кнопки:
1 кнопка - нажатие данной кнопки запускает style1.css и получается версия страницы для ПК без перезагрузки.
2 кнопка - нажатие данной кнопки запускает style2.css и получается версия страницы для mobile без перезагрузки. Важно чтобы перезагрузки не происходило. Как это возможно реализовать?

Answer 1

Можно пробовать так)

(function(){ 
 
var styles = [ 
  "style-1.css", 
  "style-2.css", 
  "style-3.css", 
  "style-4.css", 
]; 
 
var style = document.getElementById('style-link'); 
var toggle = document.querySelectorAll('.toggle-style'); 
for( var i = 0; i < toggle.length; i++ ){ 
  toggleStyle(i); 
} 
 
function toggleStyle(i){ 
  toggle[i].addEventListener('click', function(){ 
    style.href = styles[i]; 
  }); 
} 
 
})();

<link id="style-link" rel="stylesheet" type="text/css" href="style-1.css" > 
 
Откуда Вы?<br> 
<button class="toggle-style">ПК</button> 
<button class="toggle-style">Мобильный</button> 
<button class="toggle-style">Калькулятор</button> 
<button class="toggle-style">Стиральная Машинка</button>

Answer 2

1) Создаёте две кнопки в HTML, каждая из которых выволняете JS-функцию подстановки пути к нужному файлу стилей

<button onclick="toDesktop()">To Desktop</button>
<button onclick="toMobile()">To Mobile</button>

2) В <head> задаёте тегу <link>, через который подключаете стили, id

<link id="stylesheet" rel="stylesheet" href="style1.css">

3)Через JS меняете тегу <link> значение атрибута href

function toMobile() {
    document.getElementById("stylesheet").href = "style1.css";
}
function toDesktop() {
    document.getElementById("stylesheet").href = "style2.css";
}