Начальные теоретические сведения об изменении 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.
Ниже приведена сводная таблица с вышеперечисленными объектами.
| Объект | Где поддерживается | Описание |
|---|---|---|
| style |
     |
Представляет значения установок встроенной(inline) таблицы стилей |
| CSSStyleDeclaration |
v9 |
Представляет вычисленные значения стилей элемента |
| currentStyle |
   |
Представляет вычисленные значения стилей элемента |
| runtimeStyle |
 |
Представляет перезаписанные значения стилей элемента |
| styleSheets |
|
Объект DOM, содержит все внешние таблицы стилей Web страницы(коллекция), объявленные как через тег style, так и через link |
Отличие имен свойств CSS и имен атрибутов элементов страницы
Имена свойств объектов Javascript нередко отличаются от имен соответствующих CSS свойств, но есть нехитрое правило соответствия имен — свойства объекта style названы так же, как и соответствующие CSS свойства, но пишутся без дефисов, а следующий за дефисом символ пишется заглавным. Ниже для справки приведено соответствие этих имен для большинства CSS свойств.
На этом пожалуй закончим с сухой теорией. В следующей статье Javascript и CSS, поддержка браузерами на тему взаимодействия Javascript и CSS, вам будет предложено провести исследование на предмет поддержки браузерами Javascript объектов, взаимодействующих с CSS таблицами.
| Атрибуты объектов | 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 | Позиционный уровень блока |