HTML+CSS+JavaScript

Искал я на форуме что-то похожее, но не нашел...
Короче такой вопрос: можно ли свойства слоя (style="position: absolute; top: 0; left: 0; width: 50px; height: 50px;") установить в файле *.css и если да, то как? Я пробовал это все записывать в файл, но не получается...подскажите пожалуйста.

Можно назначить класс в файле css

.pos { position: absolute; top: 0; left: 0; width: 50px; height: 50px; }

В тэге слоя сослаться на него при помощи атрибута class

<div class='pos'>Hello world!</div>

Разумеется в заголовке HTML-документа необходимо сослаться на css-файл, указав правильный путь к нему

<link href="css.css" rel="stylesheet" type="text/css" />

Если относительный путь не срабатывает (используется многоуровневое вложение), можно задать абсолютный путь от корня сайта

<link href="/css.css" rel="stylesheet" type="text/css" />

Я так пробовал, и пробовал через id.
Проблема в том, что javascript не может после этого изменить эти значения.
В общем я сделал что-то вроде окошка, которое можно перетаскивать. Когда эти значения (position: absolute; top: 90; left: 50; width: 180px; height: 50px;) внутри тега div, то все работает нормально, а когда они или в head теге или в отдельном файле, то окно не перемещается, т.е. он, скрипт, не может изменить эти значения.
Как это можно обойти?

Изменить значение свойства стиля - где бы они не были записаны - скрипт МОЖЕТ.

Но, видимо, ваш скрипт сначала ЧИТАЕТ эти значения, а потом изменяет прочитанное.
А прочитать - напрямую - он может только то, что указано в атрибутах тегов.

Узнать значения, которые не указаны непосредственно в теге, можно через cyrrentStyle (для MSIE) и через getPropertyValue (для Mozilla).

Подробнее cмотрите, например, здесь или здесь - изучите там сообщения от CNTv2.0 (мой старый никнейм).


PS. Кстати, top: 90; left: 50; - это некроссбраузерно (т.е. не все браузеры поймут).
Надо указывать размерность - top: 90px; left: 50px; - причём с размерностью писать надо ВЕЗДЕ:
и внутри тега, и в блоке <style></style>, и во внешнем файле.

С мозилой получилось, а вот с ИЕ не получается...
делал вот так:
document.getElementById ('my').currentStyle.left , но браузер выдает ошибку...

alert (document.getElementById ('my').currentStyle.left) ошибки дать не может.

А вот document.getElementById ('my').currentStyle.left = '20px', разумеется, даст ошибку.

Ибо узнавать/читать значение свойства надо через currentStyle,
а присваивать значение - через style.

вот код функции:

// Функция инициализации движения // Записываем всё параметры начального состояния function initMove(div, event) {     var event = event || window.event;     x0 = defPosition(event).x;     y0 = defPosition(event).y;     if (bw.ns == 1){      divX0 = parseInt(document.defaultView.getComputedStyle(div, null).getPropertyValue ("left"));      divY0 = parseInt(document.defaultView.getComputedStyle(div, null).getPropertyValue ("top"));     }     else{      divX0 = document.getElementById (div).currentStyle.left;      divY0 = document.getElementById (div).currentStyle.top;     }

Вот код html страницы с вызовом этой функции:
<div id='menu_w' style="position: absolute; top: 90px; left: 50px; width: 180px; height: 50px;">
<table width="100%" border="2" bordercolor="blue" cellspacing="0" cellpadding="1">
<tr>
<td id="h2" onclick="hide(2);" background="2.gif">
<img src="1.gif" border="0">
</td>
<td width="100%" align="center" background="2.gif" onmousedown = 'initMove(menu_w, event);' onmouseup = 'moveState = false;' onmousemove = 'moveHandler(menu_w, event);' style="{cursor:move}">
<font color=white>Меню</font>
</td>
</tr>
<tr>
<td id="b2" colspan="2">
-&nbsp;<a href="?p=main">Главная</a><br>
-&nbsp;<a href="#" OnClick='open_log();'>Вход</a><br>
-&nbsp;<a href="?p=reg">Регистрация</a><br>
-&nbsp;<a href="?p=about">О проекте</a><br>
-&nbsp;<a href="?p=help">Справка</a><br>
</td>
</tr>
</table>
</div>

Ну и почему для Mozilla вы используете parseInt, а для MSIE - не используете?

currentStyle - он ведь тоже вернёт строку. А вам явно нужны числовые значения.

Все равно дает ошибку вот на этой строке:

function initMove(div, event) {     var event = event || window.event;     x0 = defPosition(event).x;     y0 = defPosition(event).y;     if (bw.ns == 1){      divX0 = parseInt(document.defaultView.getComputedStyle(div, null).getPropertyValue ("left"));      divY0 = parseInt(document.defaultView.getComputedStyle(div, null).getPropertyValue ("top"));     }     else{      divX0 = parseInt(document.getElementById (div).currentStyle.left);      divY0 = parseInt(document.getElementById (div).currentStyle.top);     }          moveState = true; }

"Ошибка: требуется объект.
Код: 0"

Вы функции передаёте НЕСУЩЕСТВУЮЩУЮ переменную menu_w.

А надо передавать значение id вашего "плавающего" контейнера, т.е. строку 'menu_w'

Правильно будет так:

onmousedown="initMove ('menu_w', event)"

Теперь ни лиса, ни ИЕ не работают.
ИЕ говорит: " "Style" - есть null или не является объектом"
Лиса вот что говорит: "uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMViewCSS.getComputedStyle]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: file:///Z:/home/192.168.1.2/www/other/game/window.js :: initMove :: line 44" data: no]
Line 0" 44 строка - это строка сразу после проверки браузера, т.е. divX0 = parseInt(document.defaultView.getComputedStyle(div, null).getPropertyValue ("left"));

Всё лишнее я убрал.
Ваши ошибки выделил жирно.
Запускайте в разных браузерах, проверяйте.

<script> function initMove (div) { if (navigator.userAgent.indexOf ('MSIE') < 0)    {    divX0 = parseInt (document.defaultView.getComputedStyle (document.getElementById (div), null).getPropertyValue ('left'));    divY0 = parseInt (document.defaultView.getComputedStyle (document.getElementById (div), null).getPropertyValue ('top'));    } else    {    divX0 = parseInt (document.getElementById (div).currentStyle.left);    divY0 = parseInt (document.getElementById (div).currentStyle.top);    } document.getElementById ('info').innerHTML = divX0 + ' & ' + divY0; } </script> <style> #menu_w {position: absolute; top: 90px; left: 50px; width: 180px; height: 50px} #info   {position: relative; top: 200px; height: 50px; border: 1px solid red} </style> <div id="menu_w" onmousedown="initMove ('menu_w')">press mouse button</div> <div id="info"></div>