Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Как получить текущие параметры элемента?


Автор: AtaL 25.2.2006, 23:14
Скрипты изучаю по книге, но неточностей в ней столько, что хоть вешайся.
Дошла до стилей, столкнулась со следующей проблемой.

Пусть есть рисунок, идентификатор - myimage.
Чтобы получить его параметры
( допустим,
var sizeX, sizeY;
sizeX = myimage.style.pixelWidth;
sizeY = myimage.style.pixelHeight;
) через style нужно сперва в описании стиля эти параметры задать, это понятно.

В книге сказано, что текущие параметры без предварительного задания можно получить через currentStyle или runtimeStyle. Однако в первом случае на выходе undefined и undefined, во втором - 0 и 0.

На всякий случай - полный пример скрипта в стадии отладки:
Код

        <img src="3.jpg" id="liveImage" style="top: 0; left: 0;  height: 50; width:50; position: relative">

    <script  language="JavaScript1.2"  type="text/javascript">
                                var dx, dy, i, varx, vary, koorx, koory;
        var stroka, stroka2, stroka3, stroka4, stroka5;
        dx = 1;
        dy = 1;
        i = 0;


        stroka = document.body.clientHeight+"   "+document.body.clientWidth;

        stroka2 = liveImage.style.pixelLeft+"  "+liveImage.style.pixelTop;

        stroka3 = liveImage.style.pixelWidth+"  "+liveImage.style.pixelHeight;

        stroka4 = liveImage.currentStyle.pixelWidth+"   "+liveImage.currentStyle.pixelHeight;

        stroka5 = liveImage.runtimeStyle.pixelWidth+"   "+liveImage.runtimeStyle.pixelHeight;

        alert(stroka);
        alert(stroka2);
        alert(stroka3);
        alert(stroka4);
        alert(stroka5);


О рациональности не заботилась.
Первые два алерта выдают все верно. Третий в данном случае тоже. Если убрать жесткое задание параметров размера в стиле, то третий тоже выдает нули.

Как получить текущие параметры без их задания?

Автор: 12345c 26.2.2006, 00:49
Не знаю, как по-книжному, а по опыту и отзывам на форумах наиболее правильные и стабильные в браузерах значения размеров берутся из .offsetWidth (не style). Если читать стили, то если они не заданы, получаем пустую строку.

За обращение внимания на currentStyle и runtimeStyle - спасибо, интересно было поисследовать. Первый, оказывается, принудительно что-то выдаёт по умолчанию, а второй столь же молчалив, как style.

Тестовый пример (IE):
Код
<style>table{background-color:brown;}#td1{background-color:brown;}</style>
<body bgcolor=eeeeee>
<table><tr><td>oooooo</td><td>oooooo</td></tr>
<tr><td>oooooo</td><td id=td1>oooooo</td></tr></table>
<script>
onload=function(){setTimeout("for(i in document.all.td1.currentStyle)if(i.indexOf('backgro')>=0)alert([i,document.all.td1.currentStyle[i]]);i='';",999);}
</script>
(во 2-м опыте сменить все currentStyle на runtimeStyle ) .

Автор: AtaL 26.2.2006, 01:50
12345c
Спасибо, все работает. А я-то мучилась.)
Кстати, пример взят из книги Дронова "Джава-скрипт в веб-дизайне". И это уже не первый случай...
Интересно книга устарела или просто не вычитана?

Автор: 12345c 26.2.2006, 03:24
 http://www.wmate.ru/ebooks/book92.html. Можно сказать, что сделана она на базе книги Гудмана "Библия JS, 4-е издание", которая есть в электронном виде. В ней много полезнейших сведений. Те несоответствия, вероятно, объясняются большим серьёзным объёмом материала, который надо было издать.

Время полной актуальности этой книги - 2001-й год. Сейчас надо тщательно фильтровать и не читать то, что относится к NN4, т.к. бесполезно. Всё, что относится к модели событий и DOM в не-IE, нужно читать в документации Мозиллы. Фильтровать ошибки - видимо, так, что проверять работу каждой встреченной в IE конструкции. Для правильного представления об NN/Gecko читать документацию http://js2.ru/files/js-man.rar , построенную, видимо, на книге ftp://ftp.uar.net/pub/e-books/javascript%20programmer's%20reference.pdf?L=17372291 и учитывающей NN6. Понятно, что современные методы (Ajax, XML, IE6) там не описаны, как и Опера с Мозиллой, и их надо узнавать из статей и форумов. 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)