Заменить style.css на style_n.css

Question

В наличии две страницы : index.html и index_n.html к одной применена тема css/style_index.css к другой css/style_index_n.css .Между собой их можно переключать меняя тему оформления. На страницах index.html и index_n.html ,есть кнопка-ссылка

<button class="btn_text_main" onclick="document.location='pr.html'"><font color="#337AB7">ПРОЕКТИРОВАНИЕ</button>

Которая открывает страничку pr.html со стилем оформления style_table.css . Нужно чтобы ,со страницы index_n.html открывалась страничка pr.html .НО! со стилем оформления style_table_n.css

То есть происходило переключение или подмена style_table.css на style_table_n.css в строке <link rel="stylesheet" type="text/css" href="css/style_table.css"> на <link rel="stylesheet" type="text/css" href="css/style_table_n.css">

Страниц много ,и на разные стили. Дублировать каждую на свой стиль оформления совсем не айс... Везде читал "Замена стиля оформления сайта" ,"Замена стиля оформления сайта на лету... :)"Но нигде не нашел как стиль применить и на второй,третьей странице. Немного понимаю html и css ,а вот js профан полный,только примерами работаю. Если есть Возможнось,поясните как это сделать на .js

Answer 1

Везде читал "Замена стиля оформления сайта" ,"Замена стиля оформления сайта на лету... :)"Но нигде не нашел как стиль применить и на второй, третьей странице.

Предложу такой вариант...

let v = 'white'

document.addEventListener('DOMContentLoaded', _ => {
  /*
  это тут не работает
  let v = window.localStorage.getItem('theme') || 'white'
  */
  document.querySelector('body').classList.add(v)
})

document.querySelector('button').addEventListener('click', _ => {
  /*
  это тут не работает
  let v = window.localStorage.getItem('theme') || 'white'
  */
  const o = document.querySelector('body')
  o.classList.remove(v)
  v = v === 'white' ? 'black': 'white'
  /*
  это тут не работает
  localStorage.setItem('theme', v)
  */
  o.classList.add(v)
})

:root {
  /* тут нужно описать цветовую палитру */
  --c-fon: white;
  --c-text: black;
  & .white {
    --c-fon: white;
    --c-text: black;
  }
  & .black {
    --c-fon: black;
    --c-text: white;
  }
}
body {
  color: var(--c-text);
  background-color: var(--c-fon);
}

<button>Смена темы</button>
<p>Какой-то контент</p>

Если вот эту часть

document.addEventListener('DOMContentLoaded', _ => {
  let v = window.localStorage.getItem('theme') || 'white'
  document.querySelector('body').classList.add(v)
})

Добавлять на каждой странице - можно обойтись одним "правильным" файлом css...

БЛОГ НА HUSL

Заменить style.css на style_n.css

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