Почему первое окно оповещения пустое, а второе - 100px? Я ожидаю, что первая коробка скажет 300px ..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Move</title> <style type="text/css"> div#b-ball { position:absolute; top:300px; left:300px; } </style> <script type="text/javascript"> <!-- function moveBall() { alert(document.getElementById("b-ball").style.top); document.getElementById("b-ball").style.top="100px"; alert(document.getElementById("b-ball").style.top); } //--> </script> </head> <body onload="moveBall()"> <div id="b-ball"> Basketball image here. </div> </body> </html>
Коллекция стилей содержит только стили, которые применяются непосредственно к элементу, а не стили, унаследованные от таблицы стилей.
Почему во втором поле будет 300px? Вы только что явно установили стиль (который превосходит класс) в 100px. Коллекция 'style' относится только к встроенным стилям, а не к определениям классов.