временное переключение стилей css с использованием javascript

Question

Я пытаюсь переключить таблицы стилей CSS в зависимости от времени. Один в течение дня и один в течение ночи. Я новичок, когда дело доходит до java, но я много читал в javascript и создал код, который должен позволить этой работе. Я попробовал это, конечно, это не сработает.

Я попытался поместить код в заголовок, а затем попытался поместить его непосредственно после тега. Но это тоже не сработало.

Таблица стилей css работает сама по себе, но не работает вообще при использовании в скрипте. Это заставляет меня поверить, что это неправильный сценарий. Может, я написал это неправильно?

Вот Javascript код:

<script language="JavaScript"> 
    var d=new Date(); 
    var twi_am_start = 4; 
    var twi_am_end = 5; 
    var twi_pm_start = 17; 
    var twi_pm_end = 18; 
    if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end) 
    document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">');
 
    else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start)
 
    document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/daytime.css" type="text/css">');
 
    else 
    document.write('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">');
 
</script> 

Answer 1

Вы должны ждать, пока DOM не закончит загрузку перед выполнением этой манипуляции.

Вот как это сделать с помощью JQuery:

<script type="text/javascript" charset="utf-8"> 
//<![CDATA[ 
$(function() { 
var d=new Date(); 
var twi_am_start = 4; 
var twi_am_end = 5; 
var twi_pm_start = 17; 
var twi_pm_end = 18; 
if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end) { 
    $('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">').appendTo("head"); 
} else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start) { 
    $('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/daytime.css" type="text/css">').appendTo("head");; 
} else { 
    $('<link rel="stylesheet" href="http://itsnotch.com/tumblr/files/nighttime.css" type="text/css">').appendTo("head");; 
} 
}); 
//]]> 
</script> 

Answer 2

, например жереха

вы можете достичь его через стороне сервера кода, а в том числе таблицы стилей.

<%if day then%> 

<LINK href="day.css" rel="stylesheet" type="text/css"> 

<%else %> 

<LINK href="night.css" rel="stylesheet" type="text/css"> 

<% 
end if%> 

с JQuery и можно сделать, как показано ниже

обернуть его сверх в ваш если класс

("body").removeClass('bg2').addClass("bg1"); 

("body").removeClass('bg1').addClass("bg2"); 

Answer 3

Попробуйте сделать этот код читаемым:

var d = new Date(); 

var twi_am_start = 4; 
var twi_am_end = 5; 
var twi_pm_start = 17; 
var twi_pm_end = 18; 

if (d.getHours() < twi_am_start || d.getHours() > twi_pm_end) 
{ 
    document.write(''); 
} else if (d.getHours() > twi_am_end && d.getHours() < twi_pm_start) { 
    document.write(''); 
} else { 
    document.write(''); 
} 

Эта статья должна быть из большое содействие: http://css-tricks.com/snippets/javascript/different-stylesheet-pending-the-time-of-day/.

Вот пример кода, который должен быть достаточным для ваших нужд:

<script type="text/JavaScript"> 
<!-- 
function getStylesheet() { 
     var currentTime = new Date().getHours(); 
     if (0 <= currentTime&&currentTime < 5) { 
     document.write("<link rel='stylesheet' href='night.css' type='text/css'>"); 
     } 
     if (5 <= currentTime&&currentTime < 11) { 
     document.write("<link rel='stylesheet' href='morning.css' type='text/css'>"); 
     } 
     if (11 <= currentTime&&currentTime < 16) { 
     document.write("<link rel='stylesheet' href='day.css' type='text/css'>"); 
     } 
     if (16 <= currentTime&&currentTime < 22) { 
     document.write("<link rel='stylesheet' href='evening.css' type='text/css'>"); 
     } 
     if (22 <= currentTime&&currentTime <= 24) { 
     document.write("<link rel='stylesheet' href='night.css' type='text/css'>"); 
     } 
} 

getStylesheet(); 
--> 
</script> 

<noscript><link href="main.css" rel="stylesheet" type="text/css"></noscript> 

Успехов!

Answer 4

Вместо того, чтобы изменять файлы css, я предлагаю вам изменить класс на элемент body от «day» до «night». Затем используйте селектор классов в файле css.

css file 
.day h2 {font-weight: bold;} 
.night h2 {font-weight: normal;} 
... etc 

Обновлено: Затем с помощью Javascript document.body.className='day'; изменить. Благодаря @Phrogz для JS. (См. Комментарий к этому ответу.)

Answer 5

Ваш скрипт, кажется, пишет пустой экран на странице, независимо от того, какое условие истинно.

Предлагаю добавить класс к телу в зависимости от того, какая ветка вашего if/else достигнута.

function setTimesStyles(){ 
    if(...) 
    document.body.className = 'morning'; 
    else 
    document.body.className = 'evening'; 
} 

Если поместить это в функции, как я сделал, вы можете вызвать его на странице загрузки, как это:

<body onload="setTimeStyles();"> 

Таким образом, вы можете поместить код в раздел вашего документа ,

Установив это имя класса, вы можете написать правила CSS для утра или вечером предварив их с «.morning» или «.evening», как это:

.morning h1{ color:blue; } 
.evening h1{ color:red; } 

Answer 6

Вот хороший сценарий, который позволяет до switch CSS style sheets at runtime.