Как: динамически переключать CSS-страницу - PullRequest
Новая
       0

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

3 голосов
/ 26 мая 2011

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

Ответы [ 2 ]

2 голосов
/ 26 мая 2011

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

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 голосов
/ 26 мая 2011

Здесь вы видите простой 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"/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...