Объект style. Работа с таблицами стилей при помощи JavaScript
Объект style позволяет получить доступ к каскадным таблицам стилей.
Свойства соответствуют атрибутам в каскадных таблицах стилей с неболь-
шими отличиями в написании:
? символы "–" удаляются;
? первые буквы всех слов в названии атрибута, кроме первого, делаются прописными.
Приведем примеры преобразования атрибутов стиля в свойства объекта style:
color -> color
font-family -> fontFamily font-size -> fontSize
border-left-style -> borderLeftStyle
Атрибуты стилей и их допустимые значения мы рассматривали при изучении CSS в главе 2. По аналогии с приведенными примерами можно преобразовать названия атрибутов стиля в свойства объекта style.
Кроме свойств, соответствующих атрибутам стиля, объект style имеет до-
полнительные свойства:
? cssText — стили, заданные внутри тега с помощью параметра style;
? pixelHeight и pixelWidth — высота и ширина элемента в пикселах;
? pixelLeft и pixelTop — горизонтальная и вертикальная координаты ле-
вого верхнего угла элемента в пикселах;
? posHeight и posWidth — высота и ширина элемента в единицах измере-
ния, заданных в определении стиля;
? posLeft и posTop — горизонтальная и вертикальная координаты левого верхнего угла элемента в единицах измерения, заданных в определении стиля.
Значения дополнительных свойств задаются и возвращаются в виде числа, что очень удобно для различных вычислений. Рассмотрим это на примере (листинг 3.60).
Листинг 3.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 = 5 style.posLeft = 5
Итак, в случае применения свойства left получено значение в виде строки (5px), а в случае со свойствами pixelLeft и posLeft в виде числа (5). Но по- чему, получив значения свойства left, мы не получили значения свойства top? Все дело в том, что style возвращает значение, только если атрибут за- дан внутри тега с помощью параметра style. Первый атрибут был задан на- ми внутри тега с помощью параметра style, а второй атрибут задан в табли- це стилей внутри тега <style> в заголовке документа. Поэтому значение первого мы получили, а второго — нет. Для того чтобы получить значение атрибута стиля, заданное вне тега, нужно использовать не style, а свойство currentStyle:
d1.currentStyle.top
Эту строку кода мы использовали в функции f_print() и поэтому после вы-
зова первой функции получили следующий результат: style.left = 50px currentStyle.top = 150px 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;
Источник: Прохоренок Н. А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера. — 3-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2010. — 912 с.: ил. + Видеокурс (на CD-ROM) — (Профессиональное программирование)
Похожие посты:
- Что такое селекторы и как их правильно использовать (0)
- Изменение высоты строки (межстрочного интервала) в тексте (0)
- Изменение стиля горизонтальной линии (0)
- Вывод текста заглавными буквами с помощью CSS (0)
- Задание фонового изображения для страницы с помощью CSS (0)
- Как изменить способ размножения фонового изображения (0)
- Выбор единиц измерения размера шрифтов:пикселы, пункты, пики или что-то другое (0)
