Все эти объекты возвращают объект стиля, содержащий множество свойств (порядка 180), относящихся к спецификации таблицы стилей, которая, в свою очередь, связана либо с объектом styleSheet, либо с объектом любого отображаемого элемента HTML. Почти к каждому объекту, отражающему элемент HTML, могут быть привязаны собственные объекты style. Объект style отражает набор атрибутов STYLE в тэге элемента. Если элемент находится под влиянием таблицы CSS, те значения CSS - не часть объекта style. Даже если элемент находится под влиянием одного из этих отдаленных правил таблицы стилей, Вы все еще можете назначать значение на любое свойство объекта style для любого элемента: установка, вероятно, отменит (на основании правил CSS) стили, назначенные от элемента STYLE.

Важно знать, что, в то время как свойство объекта style показывает заданное по умолчанию поведение (например, размер шрифта или выравнивание), значение по умолчанию не может быть отражено в свойстве, если оно не было явно установлено в тэге элемента атрибута STYLE или назначено другой инструкцией сценария. Версия Macintosh Internet Explorer 4 немного лучше в демонстрации значений по умолчанию, но, вообще говоря, значение по умолчанию свойства объекта style - пустая строка или пустой указатель. Поэтому, не ожидайте, что тестирование условия обязательно покажет текущее значение свойства, если это не было установлено предварительно.

Объект currentStyle в IE 5 доступен только для чтения. Он возвращает присоединённую (с помощью дескрипторов STYLE или LINK) таблицу стилей, применённую к текущему элементу. Свойства объекта currentStyle в IE 5 несколько отличаются от свойств объекта style. В объекте currentStyle отсутствуют свойства, содержащие комбинированные значения, такие как border или borderBottom. С другой стороны, этот объект имеет такие специальные свойства, как расположение сторон прямоугольника обрезки (clipTop, clipRight, clipBottom и clientLeft), которые не поддерживаются свойством clip.

компания Microsoft разработала ещё один объект стиля - runtimeStyle (в IE5.5). Этот объект позволяет сценарию в любой момент отменять любое свойство стиля, заданное в таблице с помощью атрибута STYLE. Иными словами, этот объект является версией currentStyle, доступной для чтения и записи. Отличие состоит в том, что, задавая новое значение одному из свойств этого объекта, невозможно переопределить значения в атрибуте STYLE таблицы стилей.

С этими объектами связано такое количество свойств, что разобраться во всех них и выбрать нужное практически не представляется возможным, если учесть и такой факт, что некоторые свойства поддерживаются лишь некоторыми броузерами, а некоторые, хоть и объявлены в спецификации W3C CSS Level 1 и 2, вообще не поддерживаются броузеами. Поэтому далее перечислены лишь те свойства, которые поддерживаются броузерами и среди похожих (дублирующихся) свойств их работа представляется самой корректной.

Свойства объекта стиля имеют строковые значения. Кроме того, значение многих групп свойств стилей имеют одинаковый формат. Поэтому необходимо знать формат часто используемых свойств. Этот справочник - по JavaScript, поэтому, если в этом разделе встретятся незнакомые термины, можно обратиться к какому-нибудь справочнику по CSS.

Единицы длины

Существует множество значений длины, каждое из которых определяет физический размер содержимого в документе. Единицы измерений, применяемые в CSS, представлены в таблице:

Строковое значение также может быть представлено в процентах.

Цвет

Существует 3 типа значений цвета:

1. значения RGB. Они могут быть в формате #RRGGBB, называемом шестнадцатеричным триплетом. Существуют специальные сокращения записей: если указаны три цифры, то значение расширяется до 6 (#F0F эквивалентно #FF00FF). Альтернативное выражение RGB-значения может быть задано в виде перфикса rgb() и трёх цифр по основанию 10. Например:
   document.styleSheets[0].rules[0].style.color = rgb(0, 255, 0);
   document.styleSheets[0].rules[0].style.color = rgb(0%, 100%, 0%);
2. Обычные названия цветов (см. Цветовые константы). Список безопасных цветов (Web 216) см. по адресу http://www.lynda.com/manuals/htmlguid/colortab.html
3. Названия элементов пользовательского интерфейса системы. см. Цветовые константы#Системные цвета

Стороны прямоугольника

Многие свойства управляют видом сторон прямоугольника. В большинстве случаев значения стилей могут быть применены к отдельным сторонам или к комбинациям сторон прямоугольника, в зависимости от того, скольо значений может иметь то или иное свойство. Количество значений влияет на 4 стороны прямоугольника следующим образом:

Пример:

Также следует отметить, что существуют комбинированные значения свойств, компоненты которых представляют разные классы значений. Имеет место также формат значений "URL", который задаётся с помощью приставки url() следующим образом:
ссылкаНаЭлемент.style.backgroundImage = "url(chainLink.jpg)"

Атрибут элемента CSS background . Обозначенное свойство состоит из строки разграниченных пространством значений для свойств backgroundAttachment, backgroundColor, backgroundImage, backgroundPosition, и backgroundRepeat . Может быть одно или более значение background , и значения могут идти в любом порядке.

document.all.tags("DIV").style.background = "url(logo.gif) repeat-y"

Устанавливает, как изображение "сопоставлено" с элементом. Изображение может или оставаться неподвижным в пределах просматриваемой области (области просмотра) или может прокручиваться с элементом, если документ большой.

document.all.tags("DIV").style.backgroundAttachment = "fixed"

Цвет фона элемента. Если Вы также устанавливаете backgroundImage, изображение будет поверх цвета. Прозрачные пикселы изображения позволяют цвету проглядываться через него.

document.all.highlighted.style.backgroundColor = "yellow"

URL фонового изображения элемента. Если Вы также устанавливаете backgroundColor, изображение будет поверх цвета.Прозрачные пикселы изображения позволяют цвету проглядываться через него.

document.all.navbar.style.backgroundImage = "images/navVisited.jpg"

Местоположение фонового изображения относительно области элемента (плюс дополнение). Это свойство должным образом не реализовано в Internet Explorer 4 для Macintosh.

document.all.div3.style.backgroundPosition = "20 50"

Top и left местоположения фонового изображения относительно области элемента (плюс дополнение). Эти свойства не реализованы должным образом в Internet Explorer 4 для Macintosh.

document.all.div3.style.backgroundPositionX = "20" document.all.table2.style.backgroundPositionY = "10"

Должно ли фоновое изображение (указанное свойством backgroundImage ) повторяться и, если так,то по какой оси. Вы можете использовать повторяющиеся фоновые изображения, чтобы создать горизонтальные и вертикальные полосы с некоторыми параметрами настройки.

document.all.div3.style.backgroundRepeat = "repeat-y"

Свойство для получения или установки свойств borderColor, borderStyle и/или borderWidth изо всех четырех границ вокруг элемента в одной инструкции. Вы должны определить стиль границы (см. borderStyle) для изменения этого свойства, чтобы затронуть границы элемента. Другие свойства позволяют Вам устанавливать ширину, стиль и цвет границ или их групп, если Вы не хотите, чтобы все четыре границы были одинаковыми. Только параметры настройки, явно указанные в атрибутах тэга, отражены в свойстве, но Вы можете назначать компоненты не как часть первоначального тэга.

document.all.announce.style.border = "inset red 4px"

Свойство для получения или установки свойств borderColor, borderStyle и/или borderWidth для отдельного края элемента в одной инструкции. Вы должны определить стиль границы (см. borderStyle) для изменения этого свойства, чтобы затронуть границы элемента. Если Вы хотите, чтобы все четыре грани были одинаковыми, см. атрибут границы. Только параметры настройки, явно указанные в атрибутах тэга, отражены в свойстве, но Вы можете назначать компоненты не как часть первоначального тэга.

document.all.announce.style.borderBottom = "inset red 4px" document.all.announce.style.borderLeft = "solid #20ff00 2px" document.all.announce.style.borderRight = "double 3px" document.all.announce.style.borderTop = "outset red 8px"

Цвет одного края границы элемента.

document.all.announce.style.borderBottomColor = "red" document.all.announce.style.borderLeftColor = "#20ff00" document.all.announce.style.borderRightColor = "rgb(100, 75, 0)" document.all.announce.style.borderTopColor = "rgb(90%, 0%, 25%)"

Тип линии одного края границы элемента.

document.all.announce.style.borderBottomStyle = "groove" document.all.announce.style.borderLeftStyle = "double" document.all.announce.style.borderRightStyle = "solid" document.all.announce.style.borderTopStyle = "inset"

Ширина одного края границы элемента. См. также свойство borderWidth.

document.all.announce.style.borderBottomWidth= "thin" document.all.announce.style.borderLeftWidth = "thick" document.all.announce.style.borderRightWidth = "2px" document.all.announce.style.borderTopWidth = "0.5em"

Цвет края границы

document.all.announce.style.borderColor = "red" document.all.announce.style.borderColor = "red green" document.all.announce.style.borderColor = "black rgb(100, 75, 0) #c0c0c0" document.all.announce.style.borderColor = "yellow green blue red"

Свойство которое позволяет Вам устанавливать один или несколько стилей границы. Для Internet Explorer Вы можете установить до 4 значений стиля (через пробел). Число значений определяет какие стороны получают назначенные цвета.

document.all.announce.style.borderStyle = "solid" document.all.announce.style.borderStyle = "solid double" document.all.announce.style.borderStyle = "double groove groove double"

Shortcut-свойство , которое позволяет Вам устанавливать ширину границы. Для Internet Explorer Вы можете установить 4 значения ширины через пробел (Навигатор 4 - свойство только для чтения). Число значений определяет, какие из сторон получат назначенные размеры.

document.all.founderQuote.style.borderWidth = "3px 5px"

Определяет, позволяет ли себе элемент быть отображенным в той же самой горизонтальной полосе как float элемент. Обычно рядом другой элемент имеет атрибут стиля float, установленный на left или right. Чтобы предотвратить перекрытие элементов, установите явно это свойство на ту же самую сторону (left или right). Если Вы не уверены, где могло бы происходить перекрытие, установите свойство явно на оба элемента. Элемент, чьё свойство явно установлено на значение, отличное от 0, представлен в начале строки ниже плавающего элемента.

document.all.myDiv.style.clear = "both"

Определяет область отсечения элемента. Область отсечения - область слоя элемента, в которой он видим. Отсечение может не работать должным образом в Internet Explorer 4 для Macintosh.

document.all.art2.style.clip = "rect(5px 100px 40px 0)"

Устанавливает приоритетный CSS атрибут цвета (текста).Можно устанавливать атрибут и для графических элементов, но все браузеры будут реализовывать это по разному.

document.all.specialDiv.style.color = "green"

Возвращает строку полного правила CSS , приложенного к элементу. Если правило включало параметры настройки атрибута стиля shorthand (типа border), компоненты для каждой из этих четырех сторон записаны по буквами. Например, если Вы устанавливаете атрибут элемента STYLE как STYLE = " border: groove red 3px", cssText возвратит:

BORDER-TOP: 3px groove red; BORDER-RIGHT: 3px groove red; BORDER-BOTTOM: 3px groove red; BORDER-LEFT: 3px groove red

Однако Вы можете назначить свойство на значение shorthand.

document.all.block3.style.cssText = "margin: 2px; font-size: 14pt"

Форма курсора, когда он над элементом. Точный вид курсоров зависит от операционной системы.Свойство затрагивает курсор, только когда он над текущим элементом.

if (event.altKey) { event.sourceElement.style.cursor = "help" }

Должен ли элемент быть представлен в документе. Когда установлено none, элемент скрыт, и окружающее содержание заполняет пространство; когда установлено на "" (или любое другое значение), элемент отображен.

document.all.instructionDiv.style.display = ""

Устанавливает визуальный фильтр. Визуальный фильтр может применяться к элементу, чтобы произвести эффекты типа зеркального отражения , жара, тени, и многих другие. Показанный фильтр применяется к элементу, когда его видимость изменяется. Это включает эффекты типа wipes, blinds и barn doors. Свойство filter доступно в Internet Explorer 4, но не работает в версии Macintosh.

document.all.fancy.style.filter= "dropshadow( )"

Свойство shorthand, которое позволяет Вам устанавливать одно или более связанное с шрифтом свойство (fontFamily, fontSize, fontVariant, и fontWeight) с одним оператором присваивания "=". Список разграниченных пробелом значений (в любой последовательности) применяется к определенным свойствам шрифта, для которых значение является имеющим силу типом.

document.all.subhead.style.font = "bolder small-caps 16pt"

Расположенный по приоритетам список используемых шрифтов.

document.all.subhead.style.fontFamily = "'Century Schoolbook' Times serif"

Размер шрифта элемента. Размер шрифта может быть установлен несколькими способами. Коллекция констант (xx-small, x-small, small, medium, large, x-large, xx-large) определяет то, что известно как абсолютные размеры

Другие коллекции констант (larger, smaller) известны как относительные размеры.

Наконец, Вы можете устанавливать fontSize в процентах, которые основаны на размере размера шрифта родительского элемента.

document.all.teeny.style.fontSize = "x-small"

Контролирует значение длины вторичного семейства шрифтов так, чтобы его символы имели ту же высоту, что и символы основного семейства шрифтов

document.all.teeny.style.fontSizeAdjust = "1.05"

Контролирует ширину симвлов шрифта при отображении

document.all.teeny.style.fontStretch = "expanded"

Представлен ли элемент как normal, italic или oblique. Если fontFamily включает типы шрифта, помеченные как Italic и/или Oblique, установка атрибута fontStyle вызывает эти специфические типы шрифта.Но если специализированные типы шрифта не доступны в системе, normal тип шрифта обычно изначально выглядит курсивным. Страница, посланная на печать с такими параметрами настройки шрифта полагается на хорошую согласованность между клиентским компьютером и принтером, чтобы выполнить на аппаратном уровне сгенерированное курсивное начертание шрифта.

document.all.emphasis.style.fontStyle= "italic"

Преобразует текст как нормальный/ нижний регистр

document.all.emphasis.style.fontVariant = "small-caps"

Устанавливает жирность шрифта элемента. CSS обеспечивает(предусматривает) схему оценки жирности, которая является более градуированной, чем большинство броузеров показывает на экране, но точно настроенные жирности могут входить как параметры, когда содержание послано принтеру. Масштаб - числовая оценка от 100 до 900 в приращениях с модулем 100. Поэтому fontWeight 100 был бы наименее полужирный, который будет отображен, в то время как 900 был бы наиболее полужирный. Установка нормали (задана по умолчанию для любого шрифта) эквивалентна значению fontWeight 400; стандартная полужирная установка эквивалентна 700. Другие параметры настройки (bolder и lighter) позволяют Вам установить жирность относительно жирности родительского элемента.

document.all.hotStuff.style.fontWeight = "bold"

Высота и ширина (и их модули) элемента. Поскольку значения - строки, содержащие постоянные значения, Вы не можете использовать эти свойства для вычисления. См. pixelHeight, pixelWidth, posHeight, и posWidth .

document.all.viewArea.style.height = "450px"

Для отображаемых элементов, определяет позицию левого края элемента.

Для вычислений на этом значении, восстановите pixelLeft или posLeft свойства, которые возвращают подлинные числовые значения.

document.all.blockD2.style.left = "45px"

Интервал между символами в пределах элемента.

document.body.style.letterSpacing = "1.1em"

document.body.style.lineBreak = "strict"

Высота встроенного поля (поле, содержащее одну строку).

document.all.tight.style.lineHeight = "1.1em"

Свойство shorthand для установки 3 свойств списка в одном операторе присваивания. Атрибуты, которые Вы явно не устанавливаете с этим атрибутом, принимают значения по умолчанию. Эти свойства определяют характеристики вида маркеров, автоматически закреплённых за пунктами списка внутри OL и UL элементов.

document.all.itemList.style.listStyle = "square outside none"

URL для изображения, которое должно использоваться как маркер перед пунктом списка. Поскольку этот атрибут может быть унаследован, установка (включая none) за 1 пунктом списка может отменить тот же самый атрибут или установку свойства в ее родителе.

document.all.itemList.style.listStyleImage = "images/3DBullet.gif"

Находится ли маркер внутри или вне (outdented) поля, содержащего пункта списка. Когда listStylePosition установлен на inside, и содержание - текст, маркер оказывается частью текстового блока. В этом случае, отступ пункта списка - как normal, но без outdented маркера.

document.all.itemList.style.listStylePosition = "inside"

Тип маркера пункта, который будет отображен с каждым пунктом. Этот атрибут применяется, только если listStyleImage - none (или не указанный). Константы, доступные для этого атрибута, разделены на две категории. Один набор используется с UL элементами, чтобы представить заполненный круг, пустой круг или квадрат (пустой на Macintosh, заполненый на Windows); другой набор - для элементов OL, чьи пункты списка могут быть отмечены в последовательностях арабских цифр, римских цифр (верхний регистр или нижний регистр), или символов алфавита (верхний регистр или нижний регистр).

document.all.itemList.style.listStyleType = "circle"

Свойство shortcut, которое может устанавливать размеры краёв 4 граней элемента одной инструкцией. Margin - пространство, которое простирается вне границы элемента. Чтобы обеспечить дополнительное пространство, margin освобождает пространство между смежными или вложенными элементами, (особенно теми, которые имеют набор атрибутов border). Вы можете установить 4 значения, разграниченных пробелом. Число значений определяет, какие стороны получают назначенные установки.

document.all.logoWrapper.style.margin = "5px 8px"

Все четыре свойства устанавливают ширину отдельного края края элемента. Край - пространство, который простирается вне границы элемента и не рассчитывается как часть ширины элемента или высоты.

document.all.logoWrapper.style.marginTop = "5px" document.all.navPanel.style.marginLeft = "10%"

Как элемент должен обработать содержание, в соответствии с правилами CSS.

document.all.myDiv.style.overflow = "scroll"

Свойство shortcut, которое может устанавливать дополнительные размеры до четырех граней элемента с одной инструкцией.Padding - пространство , которое простирается вокруг элемента, но не включает границу, которая может быть определена для элемента. Padding подбирает фоновое изображение или цвет его элемента. Поскольку Вы добавляете дополнение к элементу, Вы увеличиваете размер видимого прямоугольника элемента без воздействия на размер блока padding. Вы можете установить 1 из 4 разграниченное пробелом, значения padding .

document.all.logoWrapper.style.padding = "3px 5px"

Все четыре свойства устанавливают ширину единственного(отдельного) дополнительного края элемента. - пространство Padding, который простирается между границей элемента и полем содержания.

document.all.logoWrapper.style.paddingTop = "3px" document.all.navPanel.style.paddingLeft = "10%"

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

document.all.hardBR.style.pageBreakAfter = "always" document.all.navPanel.style.paddingLeft = "10%"

Высота и ширина элемента в пикселах. Используйте эти свойства для вычисления (вместо свойств типа высоты и ширины, которые возвращают строки, включая модули).

var midWidth = document.all.myDIV.style.pixelWidth/2

Для отображаемых элементов, определяет позицию left и top граней элемента (content plus left padding, border, and/or margin) относительно left и top граней следующего наиболее близкого элемента.

document.all.myDIV.style.pixelLeft++

Числовая высота и ширина элемента.

document.all.myDIV.style.posWidth = 10.5

For positionable elements, returns the value assigned to the style sheet position attribute.

var posType = document.all.myDIV.style.position

For positionable elements, define the position of the left and top edges of an element's box (content plus left padding, border, and/or margin) relative to the left and top edges of the next outermost block content container. When the element is relative-positioned, the measure is based on the left edge of the inline location of where the element would normally appear in the content. Most importantly, these properties' values are numeric and in the unit of measure set in the CSS attribute. Use these properties for calculation (including path animation) instead of the left and top properties, which store their values as strings with the unit names. All math is in the specified units. Also contrast these properties with the pixelLeft and pixelTop properties, which are integer values for pixel measures only.

document.all.myDIV.style.posLeft = document.all.myDIV.style.posLeft + 1.5

Устанавливает символы, использующиеся в качестве кавычек.

document.all.myText.style.quotes = "« »"

Устанавливает выравнивание "рубинового" текста элемента RUBY

document.all.myText.style.rubyAlign = "distribute-letter"

Устанавливает отступ "рубинового" текста элемента RUBY

document.all.myText.style.rubyOverhang = "whitespace"

Устанавливает расположение "рубинового" текста элемента RUBY относительно основного текста.

document.all.myText.style.rubyPosition = "inline"

С какой стороны элемент обтекается текстом.

document.all.myDIV.style.styleFloat = "right"

Определяет горизонтальное выравнивание текста в пределах элемента.

document.all.myDIV.style.textAlign = "right"

Определяет горизонтальное выравнивание последней строки каждого абзаца.

document.all.myText.style.textAlign = "right"

Определяет дополнительные пробелы между идеографическими и не идеографическими символами.

document.all.myText.style.textAutospace = "ideograph-alpha"

Определяет добавления к текстовому содержанию элемента в форме подчеркиваний, перечёркиваний, надчёркиваний, и (в Навигаторе и CSS) мигание. Вы можете определить больше чем один стиль художественного оформления, поставляя значения в списке через пробел. В то время как Internet Explorer 4 поддерживает blink значение, это не мигающий текст. Текстовое художественное оформление имеет необычные родительские-дочерние отношения. Значения не наследуются, но эффект художественного оформления передается ко вложенным элементам. Поэтому, если иначе не переопределено, подчеркнутый P элемент подчеркивает вложенный B элемент. Internet Explorer также включает свойства для каждого типа художественного оформления.

document.all.emphasis.style.textDecoration = "underline"

Определено ли всё вышеперечисленное для указанного текстового элемента.

document.all.emphasis.style.textDecorationLineThrough = "true"

Размер выравнивания первой строки блока встроенного текста (типа P элемента). Только на первую строку воздействует эта установка.

document.all.firstGraph.style.textIndent = "0.5em"

Контролирует дополнительные отступы для элемента, свойство textAlign которого равно Justify

document.all.firstGraph.style.textJustify = "distribute"

Для использования в будущем

ссылка_на_элемент.style.textKashidaSpace = "90%"

Управляет преобразованием букв текста элемента в прописные.

document.all.heading.style.textTransform = "capitalize"

Расположение линии в подчёркнутом начертании - над текстом или под текстом

ссылка_на_элемент.style.textUnderlinePosition = "above"

Для отображаемых элементов, определяет позицию высшего края поля элемента (содержание плюс top padding, border, и/или margin) относительно высшего края следующего наиболее близкого элемента.

Для вычислений на этом значении, отыщите pixelTop или posTop свойства, которые возвращают подлинные числовые значения.

document.all.blockD2.style.top = "40px"

В двунаправленом тексте - насколько блок текста, направленный в противоположную сторону, вложен во внешний элемент.

ссылка_на_элемент.style.unicodeBidi = "normal"

Характеристика вертикального выравнивания элемента.

document.all.myDIV.style.verticalAlign = "text-top"

Видимость элемента. Окружение содержания не закрывает левый пробел элемента, чьё свойство видимости установлено в hidden.

document.all.myDIV.style.visibility = "hidden"

Контролирует интерпретацию символов пробела в коде источника элемента

ссылка_на_элемент.style.whiteSpace = "nowrap"

Контролирует характеристики разрыва слова, содержащего как латинские, так и азиатские символы

ссылка_на_элемент.style.wordBreak = "normal"

Контролирует расстояние между словами

ссылка_на_элемент.style.wordSpacing = "normal"

Контролирует характеристики перехода слова на новую строку в ьлоковом элементе текста, элементе с внутренне определёнными размерами или позиционируемом элементе

ссылка_на_элемент.style.wordWrap = "normal"

Контролирует направление потока содержимого web-страницы (слева-направо/сверху-вниз или сверху-вниз/справа-налево, как в некоторых азиатских языках)

ссылка_на_элемент.style.writingMode = "tb-rl"

Положение в списке относительно других элементов в пределах того же самого родительского контейнера.

document.all.myDIV.style.zIndex = 3