js - dostęp do styli css w skrypcie

0

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?

0

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?

Nie będzie w stanie - wtedy musisz użyć klasy i zebrać wszystkie elementy ze strony o tej klasie.

0

Poza tym zastanawiam się, co będzie jeśli więcej obiektów typu div nazwę "myboard"

na pewno będzie niepoprawny dokument html
na niepoprawnym dokumencie html każda operacja jest podejrzana, i może zwracać różne wyniki pod różnymi przeglądarkami

0

Znalazłem następujący sposób dostępu do parametrów stylu css:

var theRules = new Array();
if (document.styleSheets[0].cssRules) {
	theRules = document.styleSheets[0].cssRules;
} else if (document.styleSheets[0].rules) {
	theRules = document.styleSheets[0].rules;
}

Znacie jakiś inny?

1 użytkowników online, w tym zalogowanych: 0, gości: 1