Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Правильное использование document.getElementById (https://javascript.ru/forum/events/38223-pravilnoe-ispolzovanie-document-getelementbyid.html)

valek-dim 23.05.2013 23:08

Правильное использование 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 таким же способом не получается сделать. Подскажите пожалуйста, что тут не так

ksa 24.05.2013 09:06

Цитата:

Сообщение от valek-dim
что тут не так

Значения у тебя "не так"... :)

var a=10;
document.getElementById('portfolio').style.left=a+'px';

valek-dim 24.05.2013 20:52

Cпасибо!)


Часовой пояс GMT +3, время: 10:37.