Javascript и CSS, введение

Начальные теоретические сведения об изменении Web страниц с помощью Javascript и CSS

Способы внедрения CSS на Web страницу

Начнем с того, что существует 3 способа внедрения таблиц CSS в HTML документ, они перечислены в порядке приоритета их использования браузерами, от высшего к низшему:

  • встраивание (inline style settings ) — с помощью атрибута style любого тега
  • внедрение (embedded style sheets) — с помощью объявления тега style в head заголовке страницы
  • связывание( external style sheets) — с помощью ссылки на внешний CSS файл через тег link в заголовке страницы

Встраивание CSS в HTML документ происходит при объявлении атрибута style в тегах Web страницы. Объявление имеет наивысший приоритет перед остальными двумя, эти правила CSS всегда перезаписывают свойства, указанные в остальных стилях.
Внедрение стилей происходит при декларации тега style в заголовке документа следующим образом

 ...
 <head>
 ...
 <style>
 ...
 </style>
</head>

Связывание файла CSS с HTML документом происходит, когда в заголовке страницы появляется следующая запись:

 ...
<head>
 ...
 <link rel="stylesheet" type="text/css" href="table.css">
 ...
</head>

В методах связывания и внедрения существует, можно использовать импорт CSS таблиц в HTML документ с помощью записи вида

  @import: url (table.css);

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

От способа внедрения CSS таблиц зависит приоритет из выполнения браузерами, ниже перечислены способы внедрения таблиц стилей в порядке от высшего приоритета к низшему:

  • встраивание;
  • внедрение;
  • импорт CSS;
  • связывание.

Объекты Javascript для взаимодействия c CSS

Свойства встраиваемых CSS могут быть прочитаны или изменены с помощью объекта style, повторяю, свойства встраиваемых CSS правил. Но если нужны ТЕКУЩИЕ (действующие) свойства, то следует использовать объекты CSSStyleDeclaration(поддерживается IE9, Firefox, Opera, Chrome и Safari) и currentStyle(поддерживается IE и Opera). Эти объекты извлекают текущие значения стилей, встроенные любым способом. Если какое-либо свойство не указано в стилях Web страницы, то CSSStyleDeclaration и currentStyle вернут наследуемое значение или установленное по умолчанию.

Важное замечание. Объекты CSSStyleDeclaration и currentStyle используются только для чтения и не могут быть использованы для изменения CSS свойств!

    • Примечание.
  • Иногда бывает, что одно и тоже CSS свойство может быть считано в другом формате, чем оно было установлено ранее, например, объект CSSStyleDeclaration извлекает RGB цвет в предопределенных наименованиях основных цветов.
  • Другое отличие состоит в том, что сокращенные формы записи некоторых свойств лишь частично поддерживаются объектами CSSStyleDeclaration и currentStyle. Например, border в сокращенной форме записи, когда в одной строке указываются цвет, стиль и толщина рамки.

Дополнение к примечанию:

  • Свойство стиля border поддерживается в Opera, но не поддерживается в IE, Firefox, Chrome и Safari.
  • Свойства borderColor, borderStyle и borderWidth поддерживаются в IE и Opera, но не поддерживаются в Firefox, Chrome и Safari.
  • Свойства borderBottomColor, borderBottomStyle, borderBottomWidth, borderLeftColor, borderLeftStyle, borderLeftWidth поддерживаются в IE, Firefox, Opera, Chrome и Safari. Т.е., если вам нужны текущие установки свойства border, для кроссбраузерности надо использовать borderBottomColor, borderBottomStyle, borderBottomWidth.

В Internet Explorer есть еще один объект для работы с CSS таблицами. Это runtimeStyle, он имеет приоритет выше, чем у всех вышеперечисленных способов внедрения CSS таблиц. Когда CSS свойство изменяется с помощью runtimeStyle объекта, это свойство сразу же воздействует на элемент и на значение currentStyle, но не влияет на свойства встраиваемых в тег стилей. Объект runtimeStyle содержит только свойства, установленные им самим. Этот объект полезен в тех случаях, когда свойство надо изменить только в run-time, но не надо сохранять его измененное значение.

Свойства стилей могут быть доступны с помощью методов getAttribute(), setExpression() и removeAttribute() в IE всех версий и методов getPropertyValue, setProperty и removeProperty в Firefox, Opera, Chrome, Safari и IE9.

Ниже приведена сводная таблица с вышеперечисленными объектами.

Таблица 1. Объекты Javascript для работы с CSS таблицами.
Объект Где поддерживается Описание
style
Представляет значения установок встроенной(inline) таблицы стилей
CSSStyleDeclaration
v9
Представляет вычисленные значения стилей элемента
currentStyle
Представляет вычисленные значения стилей элемента
runtimeStyle
Представляет перезаписанные значения стилей элемента
styleSheets
Объект DOM, содержит все внешние таблицы стилей Web страницы(коллекция),  объявленные как через тег style, так и через link

Отличие имен свойств CSS и имен атрибутов элементов страницы

Имена свойств объектов Javascript нередко отличаются от имен соответствующих CSS свойств, но есть нехитрое правило соответствия имен — свойства объекта style названы так же, как и соответствующие CSS свойства, но пишутся без дефисов, а следующий за дефисом символ пишется заглавным. Ниже для справки приведено соответствие этих имен для большинства CSS свойств.

На этом пожалуй закончим с сухой теорией. В следующей статье Javascript и CSS, поддержка браузерами на тему взаимодействия Javascript и CSS, вам будет предложено провести исследование на предмет поддержки браузерами Javascript объектов, взаимодействующих с CSS таблицами.

Таблица 2. Соответствие имен свойств CSS и свойств JavaScript объекта STYLE
Атрибуты объектов CSS свойства Описание
background background Цвет фона элемента
backgroundAttachment background-attachment Указывает, будет ли фоновое изображение стационарным или прокручиваемым
backgroundColor background-color Цвет фона элемента
backgroundImage background-image Фоновое изображение
backgroundPosition background-position Исходное положение фонового изображения
backgroundPositionX Абсцисса фонового изображения
backgroundPositionY Ордината фонового изображения
backgroundRepeat background-repeat Тип заполнения элемента фоновым изображением
border border Стенографические свойства для одновременного задания ширины, стиля и цвета всех границ
borderTop border-top Стенографические свойства для одновременного задания ширины, стиля и цвета границ

(сверху, справа, снизу, слева )

borderRight border-right
borderBottom border-bottom
borderLeft border-left
borderColor border-color Стенографическое свойство для одновременного задания цвета всех границ
borderStyle border-style Стенографическое свойство для одновременного задания стиля линий всех границ
borderWidth border-width Стенографическое свойство для одновременного задания размеров зоны границы блока
borderTopColor border-top-color Цвет границы (сверху, справа, снизу, слева )
borderRightColor border-right-color
borderBottomColor border-bottom-color
borderLeftColor border-left-color
borderTopStyle >border-top-style Стиль линии границы (сверху, справа, снизу, слева)
borderRightStyle border-right-style
borderBottomStyle border-bottom-style
borderLeftStyle border-left-style
borderTopWidth >border-top-width Размер зоны границы блока (сверху, справа, снизу, слева)
borderRightWidth border-right-width
borderBottomWidth border-bottom-width>
borderLeftWidth border-left-width
clear clear Задает управление потоком после смещенного блока
clip clip Область усечения, определяющая видимую часть содержимого блока
color color Цвет текста
cursor cursor Тип курсора
display display Тип структурного блока, порождаемого элементом
filter filter Фильтр
styleFloat float Задает смещение блока, вследствие чего блок будет обтекаться текстом контейнера
font font Стенографическое свойство для одновременного задания нескольких свойств шрифта
fontFamily font-family Гарнитура шрифта
fontSize font-size Размер шрифта
fontStyle font-style Начертание шрифта
fontVariant font-variant Может задать вывод капителью
fontWeight font-weight Насыщенность шрифта
height height Высота содержимого блока
left left Горизонтальное смещение блока относительно левой границы контейнера
letterSpacing letter-spacing Межсимвольное расстояние
lineHeight line-height Межстрочный интервал
margin margin Стенографическое свойство для одновременного задания полей
marginBottom margin-bottom Размер зоны полей вокруг блока (сверху, справа, снизу, слева)
marginLeft margin-left
marginRight margin-right
marginTop margin-top
overflow overflow Тип усечения содержимого, выходящего за пределы блока
padding padding Стенографическое свойство для одновременного задания отступов
paddingBottom padding-bottom Размер зоны отступов внутри блока (сверху, справа, снизу, слева )
paddingLeft padding-left
paddingRight padding-right
paddingTop padding-top
pixelHeight Высота содержимого блока в пикселах
pixelLeft Горизонтальное смещение блока относительно левой границы контейнера в пикселах
pixelTop Вертикальное смещение блока относительно левой границы контейнера в пикселах
pixelWidth Ширина содержимого блока в пикселах
posHeight Высота содержимого блока
posLeft Горизонтальное смещение блока относительно левой границы контейнера
posTop Вертикальное смещение блока относительно левой границы контейнера
posWidth Ширина содержимого блока
position position Алгоритм позиционирования
textAlign text-align Выравнивание текста
textDecoration text-decoration Декорирование текста
textDecorationBlink Мерцающий текст
textDecorationLineTrough Перечеркнутый текст
textDecorationNone Текст без эффектов
textDecorationOverLine Надчеркнутый текст
textDecorationUnderLine Подчеркнутый текст
textIndent text-indent Отступ первой строки текста в блоке
textTransform text-transform Преобразование текста
top top Вертикальное смещение блока относительно верха контейнера
verticalAlign Вертикальное выравнивание HTML элемента относительно контейнера
visibility visibility Видимость блока
width width Ширина содержимого блока
zIndex z-index Позиционный уровень блока