как: динамически переключать страницу css

#javascript #html #css #dynamic

#javascript #HTML #css #динамический

Вопрос:

Я работаю над веб-страницей для встроенного устройства, где пространство для хранения на сервере очень ограничено. Я хочу, чтобы пользователь мог переключаться между дневным и ночным режимами просмотра веб-страниц. Для этого я хотел бы просто загрузить страницу, используя другую веб-страницу, при нажатии кнопки. Я не хочу иметь две копии каждой страницы, потому что у меня недостаточно места. Есть ли способ переключиться на другую страницу css или как-то динамически загрузить css? Я могу использовать только html и javascript. Нет PHP или asp.net .

Ответ №1:

Позвольте мне привести доводы в пользу чего-то еще более простого:

1: Один CSS:

 .day {
  color: black;
  background-color: white;
}

.night {
  color: white;
  background-color: black;
}

.day #content {
  color: blue;
}

.night #content{
  color: red;
}

2: Один HTML:

 <html>
  <head>
    <link rel="stylesheet" type="text/css" href="dayornight.css">
  </head>
  <body class="day">
    <div id="content">
        <a>Hello World!</a>
    </div>
  </body>
</html>

3. Небольшой фрагмент кода JavaScript или jQuery, привязанный к кнопке, которая переключает класс в теге body с дневного на ночной.

Как вы можете видеть, если откроете этот пример в своем браузере, изменение класса не только изменяет стиль CSS основного текста, оно также может сместить содержащиеся в нем элементы, поскольку теперь их селекторы совпадают по-другому.

Ответ №2:

Здесь вы переходите к простому javascript:

JS:

 function change_css(){
    var oLink = document.createElement("link") 
    oLink.href = "new_css.css"; //new css filename
    oLink.rel = "stylesheet"; 
    oLink.type = "text/css"; 
    document.body.appendChild(oLink);
}

HTML:

 <button onclick="change_css()" value="css change"/>

1. Это просто добавляет таблицу стилей, верно? Это не избавляет от старого? Вам пришлось бы беспокоиться о переопределении правил, специфичности, возможности написания «specificity»…

2. @sdleihssirhc правила css каскадируются, поэтому новые правила будут переопределять старые