Несмотря на то, что времена, когда JavaScript использовал длинные и скучные блоки кода для конкретных браузеров, прошли, все еще необходимо время от времени использовать некоторые простые блоки кода и обнаружение объектов, чтобы гарантировать, что некоторый код работает правильно на машине пользователя.
В этой статье я опишу 7 различий в синтаксисе JavaScript в Internet Explorer и Firefox.
1. Свойство CSS «float»
Основным синтаксисом для получения определенного свойства CSS данного объекта является свойство object.style, а в свойствах, написанных через дефис, вместо этого используется верблюжья нотация. Например, чтобы получить атрибут цвета фона элемента div с идентификатором «заголовок», нам нужно использовать следующий синтаксис:
document.getElementById("header").style.borderBottom="1px Solid #ccc";
Но поскольку «float» — зарезервированное слово в JavaScript, мы не можем использовать object.style.float для получения атрибута «float». Вот как мы используем его в обоих браузерах:
Синтаксис IE:
document.getElementById("header").style.styleFloat = "left";
Синтаксис Firefox:
document.getElementById("header").style.cssFloat = "left";
2. Стиль расчета элементов
Используя приведенный выше объект object.style.property, JavaScript может легко получить и изменить заданный стиль CSS объекта. Но ограничением этого синтаксиса является то, что он может получать только встроенные в HTML стили или стили, установленные непосредственно с помощью JavaScript. Объект стиля не может получить стили, заданные с помощью внешних таблиц стилей. Чтобы получить «расчетный стиль» объекта, мы используем следующий код:
Синтаксис IE:
var myObject = document.getElementById("header");
вар myStyle = myObject.currentStyle.backgroundColor;
Синтаксис Firefox:
var myObject = document.getElementById("header");
вар myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
вар myStyle = myComputedStyle.backgroundColor;
3. Получите атрибут class элемента.
Как и в случае с атрибутом «float», два браузера используют разные методы JavaScript для получения этого атрибута.
Синтаксис IE:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("имякласса");
Синтаксис Firefox:
var myObject = document.getElementById("header");
вар myAttribute = myObject.getAttribute("класс");
4. Получение атрибута «for» метки
аналогично 3. Использование JavaScript для получения атрибута «for» метки также имеет другой синтаксис.
Синтаксис IE:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("htmlFor");
Синтаксис Firefox:
var myObject = document.getElementById("myLabel");
var myAttribute = myObject.getAttribute("for");
Тот же синтаксис используется для метода setAtrribute.
5. Получите позицию курсора
. Получить позицию курсора элемента можно редко. Если вам нужно это сделать, синтаксис IE и Firefox также различается. Этот пример кода довольно прост и обычно используется как часть многих сложных обработчиков событий и используется только для описания различий. Следует отметить, что результаты в IE отличаются от результатов в Firefox, поэтому с этим методом возникают некоторые проблемы. Зачастую эту разницу можно компенсировать получением «позиции прокрутки» — но это тема другой статьи.