Показать сообщение отдельно
  #1 (permalink)  
Старый 23.05.2013, 23:08
Новичок на форуме
Отправить личное сообщение для valek-dim Посмотреть профиль Найти все сообщения от valek-dim
 
Регистрация: 23.05.2013
Сообщений: 2

Правильное использование document.getElementById
Доброго времени суток!
В общем есть вот такая конструкция html

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="style.css">
		<script src="java.js"></script>
	</head>
	<body>

		<div id="home">
		</div>
		<div id="portfolio">
		</div>
		<div id="service">
		</div>
		<div id="menu">
			<a href="#" onclick='changeStyleDiv1()'>red</a>
			<a href="#" onclick='changeStyleDiv2()'>blue</a>
			<a href="#" onclick='changeStyleDiv3()'>pink</a>
		</div>
	</body>
</html>


К нему прикреплен css

* {
	margin: 0;
	padding: 0;

}
#home {
	background-color: red;
	position: relative;
	}
#portfolio {
	background: blue;
	position: relative;
	-webkit-transition:left 2.2s ease;
	transition:left 2.2s ease;
}
#menu{
	background-color: green;
	height: 70px;
	position: fixed;
	top: 0;
}
#service {
	background-color: pink;
	position: relative;
	-webkit-transition:left 2.2s ease;
	transition:left 2.2s ease;
}


и javascript

window.onload = function style() {
	
	var Width = document.documentElement.clientWidth;

	document.getElementById('menu').style.width = 'Width';
	document.getElementById('service').style.width = 'Width';
	document.getElementById('portfolio').style.width = 'Width';
	document.getElementById('home').style.width = 'Width';
	document.getElementById('portfolio').style.left = 'Width';

	var Height = document.documentElement.clientHeight;
	document.getElementById('service').style.height = 'Height';
	document.getElementById('portfolio').style.height = 'Height';
	document.getElementById('home').style.height = 'Height';

	document.getElementById('service').style.left = '1000px';
	document.getElementById('portfolio').style.left = 'Width';
}


function changeStyleDiv1(){
    document.getElementById('portfolio').style.left = 'Width';
    document.getElementById('service').style.left = 'Width * 2';

}
function changeStyleDiv2(){
    document.getElementById('portfolio').style.left = '0';
    document.getElementById('service').style.left = 'Width';
}
function changeStyleDiv3(){
    document.getElementById('service').style.left = '0';
    document.getElementById('portfolio').style.left = '-Width';
}


Проблема в том, что в функции style работает только document.getElementById('ID').style.width = 'Width';
Height и left таким же способом не получается сделать. Подскажите пожалуйста, что тут не так
Ответить с цитированием