Отправляет email-рассылки с помощью сервиса Sendsay

CSS и DHTML для сайтостроительства

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Создание сайта и его продвижение" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

  Апрель 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Наталия

Статистика

779 подписчиков
-1 за неделю
←   Все выпуски   →

CSS и DHTML для сайтостроительства. Выпуск 2


Выпуск 2

Здравствуйте, дорогие читатели!

Кросс-браузерный JavaScript

JavaScript используется для доступа к CSS свойствам элементов страницы и изменеия их значений. Однако синтаксис, распознаваемый Netscape 4.0 и IE 4.0 отличаются. Дабы знать, где собака порылась где кроется это различие, я покажу вам простой способ создания кросс-браузерных скриптов, написанных на JavaScript, которые будут работать и в Netscape 4.0 и в IE 4.0.

Проверка кросс-браузерности

Прежде всего мы должны узнать, каким браузером пользователь просматривает страницы. Небольшой фрагмент кода будем стандартной проверкой браузера почти во всех примерах рассылки: ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
 Объект document.layers специфичен для Netscape 4.0, а document.all, соответственно, - для IE 4.0. Таким образом, обычной проверкой существования объекта мы создаем переменные типа boolean: ns4 (для Netscape 4.0) and ie4 (для Internet Explorer 4.0). Значения этих переменных принимают зачения true или false в зависимости от используемого браузера. Тепер, как только вы захотите проверить браузер, вы вставляете в JavaScript проверку if (ns4) или if (ie4). Например: 

function check() {
    if (ns4) {
        // do something in Netscape Navigator 4.0
    }
    if (ie4) {
        // do something in Internet Explorer 4.0
    }
}

Использование JavaScript и CSS-P

Допустим, у нас имеется DIV таг следующего вида: <DIV ID="blockDiv" style="position:absolute; left:50; top:100; width:30;">
<IMG SRC="block.gif" WIDTH=30 HEIGHT=30 BORDER=0>
</DIV> Не забываем, что это пример. А значит, blockDiv может быть переименован во что угодно и новый код будет работать по такому же принципу, что и приведенный здесь.

Для Netscape типичный способ доступа к CSS-P свойствам такой: document.blockDiv.propertyName или document.layers["blockDiv"].propertyName Для Internet Explorer немного другой: blockDiv.style.propertyName или document.all["blockDiv"].style.propertyName где propertyName - одно из свойств перечисленных в прошлом выпуске: width, height и так далее.

Сейчас мы введём дополнительную переменную-указатель, которая позволит оптимизировать дальнейший код: if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style Теперь переменная block может использоваться для доступа к свойствам DIV тага в обоих браузерах одинаково. Например, если вы хотите получить левую координату DIV тага, то вы можете просто написать block.left.

Пример полностью

Этот пример показывает как можно получать свойства left, top и visibility элемента, расположенного на страничке.

Скрипт: 

<SCRIPT LANGUAGE="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

function init() {
    if (ns4) block = document.blockDiv
    if (ie4) block = blockDiv.style
}

//-->
</SCRIPT>

HTML: <BODY onLoad="init()">

<A HREF="javascript:alert(block.left)">left</A> -
<A HREF="javascript:alert(block.top)">top</A> -
<A HREF="javascript:alert(block.visibility)">visibility</A>

<DIV ID="blockDiv" style="position:absolute; left:50px; top:100px;
width:30px; height:30px; clip:rect(0px 30px 30px 0px); background-color:red;
layer-background-color:red;">
</DIV>

</BODY>

Важно! Функция init() вызывается в BODY таге на событие onLoad="", то есть выполняется сразу после того, как загрузится вся страница, и DIV таг существует. Если вы попробуете выполнить этот скрипт перед полной загрузкой страницы, вы получите JavaScript ошибку вроде "block is not defined" (block не определён).

Различия

Если вы попробуете этот пример в Netscape и в IE, то получите два разных результата:
СвойствоРезультат в NetscapeРезультат в Internet Explorer
left5050px
top100100px
visibilityshowvisible
Эти различия могут быть причиной некоторых проблем, но в следующих выпусках мы поговорим, как обойти их.

Дорогие читатели! Если у вас возникают вопросы по тексту рассылки, я буду рада на них ответить. Мой почтовый адрес идёт последней строкой в данном выпуске (at означает @). Присылайте мне также интересующие вас темы, которые я могла бы освятить в рассылке, делитесь опытом или просто комментируйте. За этот выпуск вы также можете проголосовать, исполльзуя форму внизу письма.

Всего доброго,
Наталия Македа
natalia.macheda at gmail.com
В избранное