Форум

progressive · #1 (**permalink**) 13.04.2010, 14:33

Доброго времени суток. Я решил использовать на своем сайте скрипт, который меняет фон страницы в зависимости от времени суток. Скрипт выглядит так:

<script language="JavaScript">
theTime = new Date();
theHour = theTime.getHours();
if(theHour>6&&theHour<18){
  document.write('<body background ="img/bg_day.jpg">');
}
else{
  document.write('<body background ="img/bg_night.jpg">');
}
</script>

Но дело в том, что мне необходимо, чтобы фоновая картинка находилась по центру окна. До использования скрипта, приведенного выше, в CSS у меня был такой пункт

body  {background: #fff url(img/bg_day.jpg) center fixed no-repeat;}

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

subzey · #2 (**permalink**) 13.04.2010, 15:40

Правила css всегда оверрайдят аттрибуты HTML.
Задавайте не аттрибут background, а style="background-image: url(day.jpg)"

А правило css'ное верните.

UPD: document.write для body — очень-очень плохо.

monolithed · #3 (**permalink**) 13.04.2010, 17:15

window.onload = function(){
	var theTime = new Date();
	var theHour = theTime.getHours();
	if(theHour >= 18){
		document.body.style.cssText = "background: #000000 url('some1.jpg') 50% 50% no-repeat fixed";
	}
	else{
		document.body.style.cssText = "background: #FFFFFF url('some2.jpg') 50% 50% no-repeat fixed";
	}
}

subzey · #4 (**permalink**) 13.04.2010, 19:19

Должно работать, но, опять же, зачем нам ждать окончания загрузки, если document.body доступен, если скрипт находится после отрывающего тега <body>?

Зачем перезаписывать всё значение стиля, если меняется только style.backgroundImage()?

Гхм… и, кстати, используя нехитрый прием css, можно разместить код прямо в шапке:
(пощелкайте «посмотреть» несколько раз)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<style type="text/css">
			body {background: url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) 50% 50% no-repeat}
			/* у body картинка с javascript.ru посередине */
			.skin-night body {background-image: url(http://www.google.com/intl/ru_ALL/images/logo.gif)}
			/* а у body, который внутри элемента с нужным классом — другая картинка, но все остальные параметры такие же */
		</style>
		<script type="text/javascript">
			if (Math.random()<.5){
				document.documentElement.className += " skin-night";

				/* с вероятностью 50% добавляем класс тегу html, который к этому моменту уже точно существует */
			};
		</script>
	</head>
	<body>
		<p>Lorem Ipsum</p>
		<p>Lorem Ipsum</p>
		<p>Lorem Ipsum</p>
	</body>
</html>

Пользователь без яваскрипта не останется без бекграунда, да и вообще, ничего страшного не произойдет. Картинку можно поменять, не меняя логики скрипта. Да и к тому же, можно, скажем, менять цвет ссылок в зависимости от установленного класса. Профит, да и только!

Форум

Справочник

Discord чат

Курсы javascript