AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Кросбраузерное получение стиля

Забегая вперед, для экономии своего и Вашего времени выкладываю готовый кусок универсального получения стиля, в частности ширины элемента:

element=document.getElementById('aa');
var c=element.currentStyle || window.getComputedStyle(element, null);
s.style.width=parseInt(c.width)+"px";

Первая проблема связана с тем, что для стили определенного элемента будут доступны в JavaScript через конструкцию [element].style только в двух случаях:

  1. Если стиль был прописан в HTML inline-записью (в атрибуте style соответствующего тега), например:
    В случае этого примера через JavaScript будут доступны значения свойств position и top объекта [element].style, а остальные свойства (в т.ч. установленные через CSS) будут недоступны.
  2. Если соответствующие свойства были установлены через JavaScript, то они будут доступны везде, ведь на самом деле объект [element].style отражает состояние атрибута style соответствующего тега. Если вам сложно понять, в чем же заключается проблема, взгляните на этот пример:
    <style type="text/css">
        .someClass {
            margin-left: 15px;
        }
    </style>
    <div onclick="alert(this.style.marginLeft || 'Нету :(')" class="someClass">Нажми на меня</div>
    
    Пример "в живую":
    Нажми на меня

    Как видите, хотя CSS-свойство margin-left и повлияло на отображение, его "нету" в объекте [element].style.

    Справиться с этой проблемой можно получив значения из "вычисленного" или "текущего" стиля элемента. В соответствии с названиями, это будет метод getComputedStyle (Mozilla, Opera, ...) и объект currentStyle (IE).

Метод getComputedStyle

В w3c-совместимых браузерах у объекта window доступен метод getComputedStyle, который принимает два параметра - сам элемент, для которого мы хотим получить стили, и "псевдо-элемент". Второй параметр обязательный и для простых элементов должен быть пустой строкой, или null. А вообще, этот параметр работает по аналогии с "псевдо-классами" в CSS, т.е. может принимать параметры "hover", "visited" и подобные.

Этот метод возвращает объект CSSStyleDeclaration, другими словами, объект такого же типа, как и [element].style, но в данном случае мы не можем менять свойства этого объекта, а только получать их значения.

Вот переделанный пример, подобный тому, что был представлен выше:
<style type="text/css">
    .someClass {
        margin-left: 15px;
    }
</style>
<div onclick="alert(window.getComputedStyle(this, null).marginLeft)" class="someClass">Нажми на меня</div>
Пример "в живую":
Нажми на меня

Этот пример, конечно же, не будет работать в браузерах Internet Explorer.

Стоит отдельно отметить, что getComputedStyle возвращает действительные значения стилей, которые будут изменяться в соответствии с изменением свойств объекта [element].style.

Если в вашей задаче необходимо узнать значения вычисленных свойств "по-умолчанию", то вы можете вызвать метод getComputedStyle у объекта document.defaultView с теми же параметрами, в результате получив вычисленные значения свойств строго указанных в CSS, или inline-стиле элемента.

Свойство currentStyle

В браузерах семейства Internet Explorer проблема доступа к действительным значениям стилей решена более просто и топорно.

Каждый элемент имеет свойство [element].currentStyle, которое представляет собой подобие объекта [element].style, но содержит текущие стили этого элемента. Как и в случае getComputedStyle, менять эти свойства - нельзя.

В отличие от getComputedStyle, мы не можем получить значения стилей "по-умолчанию" в браузере Internet Explorer, и кроме этого, не можем получить значения стилей для "псевдо-элементов".

Обратившись к предыдущим примерам, перепишем их для Internet Explorer:

<style type="text/css">
    .someClass {
        margin-left: 15px;
    }
</style>
<div onclick="alert(this.currentStyle.marginLeft)" class="someClass">Нажми на меня</div>
Пример "в живую":
Нажми на меня

Стоит отметить, что с помощью currentStyle нельзя получить значения для "составных" CSS свойств, которые перечисляют свойства через пробел (например background). Вам нужно обращаться к составляющим свойствам напрямую (например [element].currentStyle.backgroundColor, для цвета фона). В то же время, составные свойства margin и padding выводят верные значения.

Как работать со свойствами стилей

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

var computedStyle = element.currentStyle || window.getComputedStyle(element, null);

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

Если свойство стиля, с которым будет производиться работа, не доступно в объекте [element].style, получаем его из текущих вычисленных стилей и "запоминаем", или обновляем соответствующее свойство в [element].style. После этого нам уже не нужно обращаться к действительным стилям, ведь значение интересующего нас свойства будет соответствовать значению в [element].style.

Единицы измерения

Вторая проблема, с которой сталкиваешься при работе со свойствами стилей, заключается в том, что при изменении значений определенных свойств из JavaScript, нужно указывать единицы измерения вместе с числовым значением.

Обычно, если мы хотим переместить какой-то элемент, то мы получаем его текущее положение и прибавляем к нему определенное значение. Но значения в CSS хранятся в виде строки, например "15px". Поскольку в JavaScript оператор "+" производит конкатацию, если один из элементов операции - строка, то обычные операции, как с числами, тут не сработают:

var a = "15px";
a++; // NaN - not a number

var a = "15px";
a += 5; // 15px5

var a = "15px";
var b = a + 7; // 15px7

И наоборот, если мы попытаемся обновить свойство, приравняв ему число, то в режиме следования стандартам - ничего не произойдет, так как не указаны единицы измерения.

Поэтому, мы должны всегда следить за тем, в каком виде мы работаем со значением свойства и в каком виде мы его записываем. Работать удобнее в виде числа, а записывать нужно в виде строки, содержащей единицы измерения.

В общем виде, работа должна происходить так:

// Допустим, мы работаем с каким то элементом,
// для которого доступен style.top:
var top = parseInt(element.style.top); // Получили число из строки

top++; // Увеличили его на единицу

// Так как "px" строкового типа, то произойдет
// конкатация и будет записано правильное значение
// с единицами измерения:
element.style.top = top + "px";

Обратите внимание, что в последней строке мы можем сделать вот так:

element.style.top = top + 25 + 100 + "px";

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

Оригинал: http://javascript.ru/blog/Andrej-Paranichev/Osnovy-programmnoj-animacii-JavaScript


. По ссылке, http://www.psihiatr-moskva.ru/kak-zapisatsya/ прием психиатра в Москве.

© Copyright 2008-2016 by KDG