Главная
К библиотеке

Доступ к атрибутам стиля в IE и NN

Одна из основных проблем при создании страниц, предназначенных для просмотра как Internet Explorer, таки Netscpe Navigator, это то, что доступ к атрибутам стиля организован несколько по-разному.

Создадим элемент <DIV> с помощью следующего кода:

<DIV ID="myDiv" 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>

В этом случае для того, чтобы изменить цвет фона в NN следует использовать следующий код:

document.myDiv.bgColor = "blue"

document.layers["myDiv"].bgColor = "blue"

Тогда как в IE необходимо поступить следующим образом:

myDiv.style.backgroundColor = "blue"

document.all["myDiv"].backgroundColor = "blue"

Таким образом мы видим, что отличаются не только наименования атрибутов, но и способ их хранения. В общем случае (если наименования атрибутов совпадают) можно воспользоваться следующим кодом, который создает переменную для доступа к свойствам стиля:

if (NN) { var thisStyle = document.myDiv }
if (IE) { var thisStyle = myDiv.style }

Теперь для получения, например, горизонтальной координаты объекта можно использовать следующий код:

alert(thisStyle.Left);

Для более сложных случаев (например с цветом фона) можно воспользоваться функциями следующего вида:

function getBGColor ( o ) {
   if (NN) { return(o.bgColor) }
   if (IE) { return(o.style.backgroundColor) }
}
function setBGColor ( o, color ) {
   if (NN) { o.bgColor = color }
   if (IE) { o.style.backgroundColor = color }
}

Кроме того необходимо помнить, что свойство left в IE содержит значение с указанием единицы измерения (в нашем случае это будет "50px"). Для получения этого (и других "координатных") значений в пикселях необходимо использовать свойство pixelLeft (pixelTop и т.д.)

Пример использования описанных методов: styleattr.html