Оглавление

17.13. Объект style. Работа с таблицами стилей при помощи JavaScript

Объект style позволяет получить доступ к каскадным таблицам стилей.
Свойства соответствуют атрибутам в каскадных таблицах стилей с небольшими отличиями в написании:
□  символы "-" удаляются;
□  первые буквы всех слов в названии атрибута, кроме первого, делаются прописными.
Приведем примеры преобразования атрибутов стиля в свойства объекта style:
color  -> color
font-family ->  fontFamily
font-size  -> fontSize
border-left-style  -> borderLeftStyle

 

Атрибуты стилей и их допустимые значения мы рассматривали при изучении CSS. По аналогии с приведенными примерами можно преобразовать названия атрибутов стиля в свойства объекта style.
Кроме свойств, соответствующих атрибутам стиля, объект style имеет дополнительные свойства:
□  cssText — стили, заданные внутри тега с помощью параметра style;

□  pixeiHeight и pixeiwidth — высота и ширина элемента в пикселах;
□  pixeiLeft и pixeiTop — горизонтальная и вертикальная координаты левого верхнего угла элемента в пикселах;
□  posHeight и poswidth — высота и ширина элемента в единицах измерения, заданных в определении стиля;
□  posLeft и posTop — горизонтальная и вертикальная координаты левого верхнего угла элемента в единицах измерения, заданных в определении стиля.

 

Значения дополнительных свойств задаются и возвращаются в виде числа, что очень удобно для различных вычислений. Рассмотрим это на примере (листинг 60).

 

Листинг 60. Объект style


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Объект style</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <style type="text/css">
  div.bl { position: absolute; top: 150px; width: 150px; 
          height: 150px; overflow: auto; background-color: green }
 </style>
<script type="text/javascript">
<!--
function f_print() {
   var d1 = document.getElementById("div1");
   var d2 = document.getElementById("div2");
   var d3 = document.getElementById("div3");
   var curSt = 0;
   if (d1.currentStyle) curSt = d1.currentStyle.top;
   else if (window.getComputedStyle) // Для Firefox
      curSt = window.getComputedStyle(d1, null).top;
   d2.innerHTML = "style.left = " + d1.style.left +
                  " currentStyle.top = " + curSt;
   d3.innerHTML = "style.pixelLeft = " + d1.style.pixelLeft +
                  "  style.posLeft = " + d1.style.posLeft;
}
function f_click1() {
   var d1 = document.getElementById("div1");
   d1.style.left = "50px";
   f_print();
}
function f_click2() {
   var d1 = document.getElementById("div1"), left1;
   if (d1.style.pixelLeft)
      d1.style.pixelLeft += 10;
   else { // Для Firefox
      left1 = parseInt(d1.style.left) + 10;
      d1.style.left = left1 + "px";
   }
   f_print();
}
function f_load() {
   var d1 = document.getElementById("div1");
   var d2 = document.getElementById("div2");
   var d3 = document.getElementById("div3");
   d2.innerHTML = "style.left = " + d1.style.left +
                  " style.top = " + d1.style.top;
   d3.innerHTML = "style.pixelLeft = " + d1.style.pixelLeft +
                  "  style.posLeft = " + d1.style.posLeft;
}
//-->
</script>
</head>
<body onload="f_load();">
 <div id="div2"></div>
 <div id="div3"></div>
 <div class="bl" id="div1" style="left: 5px;">Абсолютно позиционированный 
  блок</div>
 <div>
 <input type="button" value="Сдвинуть блок на позицию 50 px" 
  onclick="f_click1();">
 <input type="button" value="Сдвинуть блок вправо на 10 px" 
  onclick="f_click2();"><br>
 <input type="button" value="Выделить первую строку красным цветом" 
  onclick="document.getElementById('div2').style.color = 'red';">
</div>
</body>
</html>

 

Посмотреть пример...

 

После загрузки в окне Web-браузера отобразится следующее сообщение:

 

style.left = 5px style.top =
style.pixelLeft = undefined style.posLeft = undefined

 


Итак, в случае применения свойства left получено значение в виде строки (5рх), а в случае со свойствами pixelLeft и posLeft в виде числа (5). Но почему, получив значения свойства left, мы не получили значения свойства top? Все дело в том, что style возвращает значение, только если атрибут задан внутри тега с помощью параметра style. Первый атрибут был задан нами внутри тега с помощью параметра style, а второй атрибут задан в таблице стилей внутри тега <styie> в заголовке документа. Поэтому значение первого мы получили, а второго — нет. Для того чтобы получить значение атрибута стиля, заданное вне тега, нужно использовать не style, а свойство currentStyle:
dl.currentStyle.top
Эту строку кода мы использовали в функции f_print() и поэтому после вызова первой функции получили следующий результат:

style.left  =  50рх currentStyle.top =  150рх
style.pixelLeft  =  50  style.posLeft  =  50


В   некоторых  Web-браузерах  свойство  currentStyle  не  поддерживается. Вместо него применяется метод getComputedStyle() объекта window:


   if (d1.currentStyle) curSt = d1.currentStyle.top;
   else if (window.getComputedStyle) // Для Firefox
      curSt = window.getComputedStyle(d1, null).top;

 

 

 

 

-----

Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити