Веб-инструмент
Веб-мастерская
Доступ к каскадным таблицам стилей в сценариях осуществляется через специальные объекты:
Несмотря на то, что <style> содержит строки правил таблицы стилей, объект элемента стиля не предназначен для получения доступа к отдельным правилам. Для этого служит объект styleSheet, являющейся элементом коллекции докемента styleSheets. С помощью этого объекта можно подключить или отключить всю таблицу, получить доступ к отдельным правилам, добавить или удалить правила. Доступ к отдельным правилам производится посредством подобъектов rules и cssRules, являющиихся коллекциями правил. Указанные выше коллекции представляют собой массивы и, следовательно, к их элементам можно обращаться с помощью индексов.
Для получения доступа к конкретному правилу можно воспользоваться одним из следующих выражений:
document.styleSheets[i].rules[j] //IE4+
document.styleSheets[i].cssRules[j] //для IE5+, NN6+
Каждому тегу <style> можно задать атрибут ID, чтобы вместо styleSheets использовать обращение идентификатора. Объект элемента стиля обладает логическим свойством disabled. Значение true этого свойства деактивирует(отключает) таблицу стилей, а значение false – активирует (подключает).
Рассмотрим пример.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Работа с каскадными таблицами стилей</title>
<style id="mystyle">
h1 {font-size: 36px; color:#FF3300}
p { font-family:"Times New Roman", Times, serif;color:#0000FF}
</style>
</head>
<body>
<h1>Работа с каскадными таблицами стилей</h1>
<p>С помощью этого объекта можно подключить или отключить всю таблицу, получить доступ к отдельным правилам, добавить или удалить правила. </p>
<button onClick="document.all.mystyle.disabled=true">
Отключить стиль
</button>
<button onClick="document.all.mystyle.disabled=false">
Подключить стиль
</button>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Объект style(не путать с объектом элемента стиля) является основным. Он определен для любого HTML-элемента и обычно применяется для изменения стилевых параметров элементов документа. Для этого можно использовать следующий синтаксис:
document. all.id_элемента.style.параметр = значение
Например:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Работа с каскадными таблицами стилей</title>
<style id="mystyle">
h1 {font-size: 36px; color:#FF3300}
p { font-family:"Times New Roman", Times, serif;color:#0000FF}
</style>
</head>
<body>
<h1 id="myh">Работа с каскадными таблицами стилей</h1>
<p id="myp">С помощью этого объекта можно подключить или отключить всю таблицу, получить доступ к отдельным правилам, добавить или удалить правила. </p>
<button onClick="document.all.mystyle.disabled=true">
Отключить стиль
</button>
<button id="mybut"onClick="document.all.mystyle.disabled=false">
Подключить стиль
</button>
<script language="JavaScript">
document.all.myh.style.color="green"
document.all.myp.style.color="red"
document.all.mybut.style.color="green"
</script>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Кроме того, что объект style является свойством объектов, представляющих HTML-элементы документа, он еще является и свойством объектов rules и cssRules. Поэтому к конкретному стилевому параметру элемента документа, находящемуся под действием определенного правила таблицы стилей, можно обратиться и так:
document.styleSheets[i].rules[j].style.color = "green" //IE4+
document.styleSheets[i].cssRules[j].style.color = "green //для IE5+, NN6+
Рассмотрим пример.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Работа с каскадными таблицами стилей</title>
<style id="mystyle">
h1 {font-size: 36px; color:red}
p { font-family:"Times New Roman", Times, serif;color:blue}
</style>
</head>
<body>
<h1 id="myh">Работа с каскадными таблицами стилей</h1>
<p id="myp">С помощью этого объекта можно подключить или отключить всю таблицу, получить доступ к отдельным правилам, добавить или удалить правила. </p>
<button onClick="document.all.mystyle.disabled=true">
Отключить стиль
</button>
<button id="mybut"onClick="document.all.mystyle.disabled=false">
Подключить стиль
</button>
<script language="JavaScript">
a=document.styleSheets[0].rules[0].style.color
a1=document.styleSheets[0].rules[1].style.color
alert("Цвет в первом правиле: "+a+"\n Цвет во втором правиле: " +a1)
document.write("<br>"+"<br>"+"Цвет в первом правиле: "+a+ "<br>"+" Цвет во втором правиле: " +a1)
</script>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Таблицы стилей, вставленные в HTML-докуменент посредством тега <style>, могут быть импортированы из внешних css-файлов с помощью оператора @import. В этих случаях для доступа к конкретному правилу импортированной таблицы используют такое выражение:
document.styleSheets[i].imports[k].rules[j]
Как уже отмечалось выше, чтобы задать значение стилевого парамера, необходимо использовать объект style. Это можно сделать, даже если таблица стилей для элемента документа не опреоделена.
Рассмотрим пример.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование стилевого параметра без таблицы стилей</title>
</head>
<body>
<h1 id="myh">Работа с каскадными таблицами стилей</h1>
<script language="JavaScript">
document.all.myh.style.color="red"
</script>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
В этом HTML-коде таблица стилей нигде не определена, хотя сценарий устанавливает красный цвет для стилевого параметра color заголовка h1.
Если таблица стилей для элемента документа не определена, то в объекте style для этого элемента все свойства имеют пустые значения, а не значения стилевых параметров, принятых по умолчанию.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Установка шрифта</title>
</head>
<body>
<h1 id="myh">Работа с каскадными таблицами стилей</h1>
<script language="JavaScript">
a=document.all.myh.style.fontSize //пустая строка
document.all.myh.style.fontSize=a+10
alert(document.all.myh.style.fontSize ) //10рх
</script>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
В приведенном примере размер шрифта заголовка не увеличился на 10рх, а установлен равным 10рх.
Значения стилевых параметров(свойства объекта style) являются строковыми. Поэтому при их задании следует использовать кавычки. Выражение
document.all.myh.style.color=red
приведет к ошибке. Для параметров, связанных с размерами и координатами(width, heigth, top, left, fontSize и т.д.), значения можно задавать в виде чисел без кавычек. Вместе с тем этим параметрам будут присвоены соответствующие строковые значения с указанием рх(пикселы) как единицы измерения. Это обстоятельство нужно иметь в виду особенно при использовании арифметических выражений для вычисления значений.
В следующем примере используется функция parseInt() для преобразования строки "10рх" в целое число 10. Это необходимо для корректности арифметической операции.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование арифметического выражения для вычисления значений</title>
</head>
<body>
<h1 id="myh">Работа с каскадными таблицами стилей</h1>
<script language="JavaScript">
a=document.all.myh.style.fontSize =10 //10
a1=document.all.myh.style.fontSize=
parseInt(document.all.myh.style.fontSize)+10 //20
alert(a+"\n"+a1)
</script>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Если потребуется задать размер шрифта не в пикселах, а пунктах (pt), то HTML-код будет такой:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Установка размера шрифта в пунктах</title>
</head>
<body>
<h1 id="myh">Работа с каскадными таблицами стилей</h1>
<script language="JavaScript">
a=document.all.myh.style.fontSize ="10pt //10pt
a1=document.all.myh.style.fontSize= String(parseInt(document.all.myh.style.fontSize)+10 )+"pt" //20pt
alert(a+"\n"+a1)
</script>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Если таблица стилей вставлена в документ с помощью тега <style> или <link> и задает параметры для некоторого HTML-элемента, то даже в этом случае, используя объект style, не удастся прочитать значения стилевых параметров.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Попытка чтения стилевых параметров</title>
<style>
h1{color:red}
</style>
</head>
<body>
<h1 id="myh">Работа с каскадными таблицами стилей</h1>
<script language="JavaScript">
a= document.all.myh.style.color //выводится пустая строка
alert(a)
</script>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Если таблица стилей задана как значение атрибута STYLE, то с помощью объекта style можно прочитать значения определенных стилевых параметров.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Попытка чтения стилевых параметров</title>
</head>
<body>
<h1 id="myh" style="color:red">Работа с каскадными таблицами стилей</h1>
<script language="JavaScript">
a= document.all.myh.style.color //выводится строка red
alert(a)
</script>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Чтобы прочитать значение стилевых параметров, заданных в таблицах с помощью тега <style> или <link>, не используя styleSheets и rules, в браузере IE5+ можно применять объект currentStyle(текущий стиль). Этот объект доступен только для чтения, т.е. с его помощью нельзя изменить значения стилевых параметров. Он возвращает таблицу стилей, примененную к HTML-документу.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование объекта currentStyle</title>
<style>
h1{color:red}
</style>
</head>
<body>
<h1 id="myh" >Работа с каскадными таблицами стилей</h1>
<script language="JavaScript">
a= document.all.myh.currentStyle.color //выводится строка red
alert(a)
</script>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Для браузера IE5.5+ имеется еще один объект runtimeStyle(стиль времени исполнения), который позволяет отменить любое свойство стиля, заданное с помощью атрибута STYLE. Новое значение свойства стиля отразится на внешнем виде элемента, но при этом не изменится значение этого же параметра в таблице стилей.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Использование объекта runtimeStyle</title>
</head>
<body>
<h1 id="myh" style="color:red">Работа с каскадными таблицами стилей</h1>
<script language="JavaScript">
a= document.all.myh.currentStyle.color //выводится строка red
alert(a)
a1=document.all.myh.runtimeStyle.color="blue" //выводится строка blue
alert(a1)
a2=document.all.myh.currentStyle.color //выводится строка blue
alert(a2)
a3=document.all.myh.style.color //выводится строка red
alert(a3)
</script>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Внимание! Свойства соответствующие стилевым параметрам, в сценариях записываются не так, как в правилах каскадных таблиц стилей. Названия свойств, как и имена переменных, в сценариях не должны содержать дефисов, широко используемых в таблицах стилей. Поэтому названия стилевых параметров в сценариях образуются из имен соответствующих параметров таблиц стилей путем перезаписи последних в стиле inerCap. Это означает, что составных именах опускаются дефисы, а второе и последующие слова записываются с прописной буквы.
Соответствие между именами параметров CSS и в сценариях
| Имя параметра в таблице стилей | Свойство стиля |
| width | width |
| height | heigth |
| z-index | zIndex |
| font-size | fontSize |
| border-color | borderColor |
| border-top-color | borderTopColor |
| list-style-image | listStyleImage |
Обсудить на форуме