ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

Работа с каскадными таблицами стилей

Работа с каскадными таблицами стилей

Доступ к каскадным таблицам стилей в сценариях осуществляется через специальные объекты:

  • объект элемента, соответствующего тегу <style> или <link>(объект элемента стиля);
  • объект styleSheet (элемент коллекции styleSheets);
  • объект cssRule (элемент коллекции rules и cssRules);
  • объект style

Несмотря на то, что <style> содержит строки правил таблицы стилей, объект элемента стиля не предназначен для получения доступа к отдельным правилам. Для этого служит объект styleSheet, являющейся элементом коллекции докемента styleSheets. С помощью этого объекта можно подключить или отключить всю таблицу, получить доступ к отдельным правилам, добавить или удалить правила. Доступ к отдельным правилам производится посредством под объектов rules и cssRules, являющиихся коллекциями правил. Указанные выше коллекции представляют собой массивы и, следовательно, к их элементам можно обращаться с помощью индексов.

Для получения доступа к конкретному правилу можно воспользоваться одним из следующих выражений:

document.styleSheets[i].rules[j] //IE4+ document.styleSheets[i].cssRules[j] //для IE5+, NN6+

Каждому тегу <style> можно задать атрибут ID, чтобы вместо styleSheets использовать обращение идентификатора. Объект элемента стиля обладает логическим свойством disabled. Значение true этого свойства деактивирует(отключает) таблицу стилей, а значение false – активирует (подключает).

Рассмотрим пример.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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.параметр = значение

Например:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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+

Рассмотрим пример.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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. Это можно сделать, даже если таблица стилей для элемента документа не опреоделена.

Рассмотрим пример.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Использование стилевого параметра без таблицы стилей</title>
</head>

<body>
<h1 id="myh">Работа с каскадными таблицами стилей</h1>
<script language="JavaScript">
document.all.myh.style.color="red"
</script>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

В этом HTML-коде таблица стилей нигде не определена, хотя сценарий устанавливает красный цвет для стилевого параметра color заголовка h1.

Если таблица стилей для элемента документа не определена, то в объекте style для этого элемента все свойства имеют пустые значения, а не значения стилевых параметров, принятых по умолчанию.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Установка шрифта</title>
</head>

<body>
<h1 id="myh">Работа с каскадными таблицами стилей</h1>
<script language="JavaScript">
a=document.all.myh.style.fontSize //пустая строка
document.all.myh.style.fontSize=a+10 //10рх
alert(document.all.myh.style.fontSize )
</script>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

В приведенном примере размер шрифта заголовка не увеличился на 10рх, а установлен равным 10рх.

Значения стилевых параметров(свойства объекта style) являются строковыми. Поэтому при их задании следует использовать кавычки. Выражение

document.all.myh.style.color=red

приведет к ошибке. Для параметров, связанных с размерами и координатами(width, heigth, top, left, fontSize и т.д.), значения можно задавать в виде чисел без кавычек. Вместе с тем этим параметрам будут присвоены соответствующие строковые значения с указанием рх(пикселы) как единицы измерения. Это обстоятельство нужно иметь в виду особенно при использовании арифметических выражений для вычисления значений.

В следующем примере используется функция parseInt() для преобразования строки "10рх" в целое число 10. Это необходимо для корректности арифметической операции.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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-код будет такой:

<!DOCTYPE HTML>
<html>
<head>
<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, не удастся прочитать значения стилевых параметров.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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 можно прочитать значения определенных стилевых параметров.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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-документу.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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. Новое значение свойства стиля отразится на внешнем виде элемента, но при этом не изменится значение этого же параметра в таблице стилей

.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<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