Napisałem bardzo prosty kod html:
<html>
<head>
<style type="text/css">
#myboard {
position:absolute;
left:100px;
width:50px;
top:0px;
border:1.5px solid red;
background-color:#FF0000;
font:bold 12px Verdana;
line-height:22px;
}
</style>
<title>Welcome...</title>
</head>
<body>
<div id="myboard" onMouseOver="move()">
<a href="http://onet.pl">onet</a>
<a href="http://wp.pl">wp</a>
<a href="http://interia.pl">interia</a>
</div>
<script language="javascript" type="text/javascript">
function move() {
mybox = document.getElementById('myboard').style;
alert(mybox.left);
}
</script>
</body>
</html>
Jak widać w funkcji move() chcę uzyskać dostęp do składowej stylu css o nazwie "left". Skrypt jednak nie działa poprawnie i nie udaje się uzyskać dostępu do tego parametru. Po wyglądzie strony widać, że parametr "left" działa.
Dopiero po zamianie linijki:
<div id="myboard" onMouseOver="move()">
na
<div id="myboard" style="left:100px;" onMouseOver="move()">
udaje się uzyskać dostęp do tej składowej.
Domyślam się, że funkcja getElementById() znajduje instancję obiektu o nazwie "myboard" i nie kojarzy tego z żadnym stylem css.
Czy istnieje możliwość skojarzenia i zmiany parametrów stylu css już po załadowaniu strony wykonując skrypt js?
Poza tym zastanawiam się, co będzie jeśli więcej obiektów typu div nazwę "myboard", funkcja getElementById() nie będzie w stanie zwrócić dostępu do nich wszystkich?