Взаимодействие JavaScript с CSS
background
Доступ: Чтение/Изменение
Атрибут элемента CSS background . Обозначенное свойство состоит из строки разграниченных пространством значений для свойств backgroundAttachment, backgroundColor, backgroundImage, backgroundPosition, и backgroundRepeat . Может быть одно или более значение background , и значения могут идти в любом порядке.
Пример:
Код HTML:
document.all.tags("DIV").style.background = "url(logo.gif) repeat-y"
Возвращаемое значение: Строка разграниченных пространством значений, соответствующих одному или более отдельным свойствам стиля background.
Значение по умолчанию: Ничего.
backgroundAttachment
Доступ: Чтение/Изменение
Устанавливает, как изображение "сопоставлено" с элементом. Изображение может или оставаться неподвижным в пределах просматриваемой области (области просмотра) или может прокручиваться с элементом, если документ большой.
Пример:
Код HTML:
document.all.tags("DIV").style.backgroundAttachment = "fixed"
Возвращаемое значение: Строка из допустимого значения: fixed | scroll.
Значение по умолчанию: scroll
backgroundColor
Доступ: Чтение/Изменение
Цвет фона элемента. Если Вы также устанавливаете backgroundImage, изображение будет поверх цвета. Прозрачные пикселы изображения позволяют цвету проглядываться через него.
Пример:
Код HTML:
document.all.highlighted.style.backgroundColor = "yellow"
Возвращаемое значение: Любая действующая спецификация цвета.
Значение по умолчанию: Ничего.
backgroundImage
Доступ: Чтение/Изменение
URL фонового изображения элемента. Если Вы также устанавливаете backgroundColor, изображение будет поверх цвета.Прозрачные пикселы изображения позволяют цвету проглядываться через него.
Пример:
Код HTML:
document.all.navbar.style.backgroundImage = "images/navVisited.jpg"
Возвращаемое значение: Любой полный или локальный URL к файлу изображения.
Значение по умолчанию: Ничего.
backgroundPosition
Доступ: Чтение/Изменение
Местоположение фонового изображения относительно области элемента (плюс дополнение). Это свойство должным образом не реализовано в Internet Explorer 4 для Macintosh.
Пример:
Код HTML:
document.all.div3.style.backgroundPosition = "20 50"
Возвращаемое значение: Вы должны быть способны определить один или два процента от ширины поля блока и высоты (соответственно), в какой точке изображения начинаются повторные изображения. Установка значений в процентах, однако, не всегда работает в IE 4 для Windows (и не работает на Mac вообще), даже при том, что они установлены как значения по умолчанию. Вам будет безопаснее всего использовать значения в пикселах (как разграниченные пробелом значения внутри одной строки). Ни одна из позволенных констант, кроме TOP и LEFT, не признана.
Значение по умолчанию: 0% 0%
backgroundPositionX, backgroundPositionY
Доступ: Чтение/Изменение
Top и left местоположения фонового изображения относительно области элемента (плюс дополнение). Эти свойства не реализованы должным образом в Internet Explorer 4 для Macintosh.
Пример:
Код HTML:
document.all.div3.style.backgroundPositionX = "20" document.all.table2.style.backgroundPositionY = "10"
Возвращаемое значение: Вы должны быть способны определить один или два процента от ширины поля блока и высоты (соответственно), в какой точке изображения начинаются повторные изображения. Установка значений в процентах, однако, не всегда работает в IE 4 для Windows (и не работает на Mac вообще), даже при том, что они установлены как значения по умолчанию. Вам будет безопаснее всего использовать значения в пикселах (как разграниченные пробелом значения внутри одной строки). Ни одна из позволенных констант, кроме TOP и LEFT, не признана.
Значение по умолчанию: 0
backgroundRepeat
Доступ: Чтение/Изменение
Должно ли фоновое изображение (указанное свойством backgroundImage ) повторяться и, если так,то по какой оси. Вы можете использовать повторяющиеся фоновые изображения, чтобы создать горизонтальные и вертикальные полосы с некоторыми параметрами настройки.
Пример:
Код HTML:
document.all.div3.style.backgroundRepeat = "repeat-y"
Возвращаемое значение: С установкой no-repeat, один образец изображения появится в пределах элемента, установленного свойством backgroundPosition (значение по умолчанию - верхний левый угол). Обычно повторения выполнены по обеим осям, но Вы можете назначить повторение изображения вниз единственным столбцом (repeat-y) или вправо единственной строкой (repeat-x).
Значение по умолчанию: repeat
border
Доступ: Чтение/Изменение
Свойство для получения или установки свойств borderColor, borderStyle и/или borderWidth изо всех четырех границ вокруг элемента в одной инструкции. Вы должны определить стиль границы (см. borderStyle) для изменения этого свойства, чтобы затронуть границы элемента. Другие свойства позволяют Вам устанавливать ширину, стиль и цвет границ или их групп, если Вы не хотите, чтобы все четыре границы были одинаковыми. Только параметры настройки, явно указанные в атрибутах тэга, отражены в свойстве, но Вы можете назначать компоненты не как часть первоначального тэга.
Пример:
Код HTML:
document.all.announce.style.border = "inset red 4px"
Возвращаемое значение: Для составляющих значений borderStyle и borderWidth см. соответствующие свойства в этой главе.
Значение по умолчанию: Ничего.
borderRight, borderTop
Доступ: Чтение/Изменение
Свойство для получения или установки свойств borderColor, borderStyle и/или borderWidth для отдельного края элемента в одной инструкции. Вы должны определить стиль границы (см. borderStyle) для изменения этого свойства, чтобы затронуть границы элемента. Если Вы хотите, чтобы все четыре грани были одинаковыми, см. атрибут границы. Только параметры настройки, явно указанные в атрибутах тэга, отражены в свойстве, но Вы можете назначать компоненты не как часть первоначального тэга.
Пример:
Код HTML:
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"
Возвращаемое значение: Для составляющих значений см. соответствующие свойства borderEdgeStyle и borderEdgeWidth.
Значение по умолчанию: Ничего.
borderBottomColor, borderLeftColor, borderRightColor, borderTopColor
Доступ: Чтение/Изменение
Цвет одного края границы элемента.
Пример:
Код HTML:
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%)"
Значение по умолчанию: Ничего.
borderBottomStyle, borderLeftStyle, borderRightStyle, borderTopStyle
Доступ: Чтение/Изменение
Тип линии одного края границы элемента.
Пример:
Код HTML:
document.all.announce.style.borderBottomStyle = "groove"
document.all.announce.style.borderLeftStyle = "double"
document.all.announce.style.borderRightStyle = "solid"
document.all.announce.style.borderTopStyle = "inset"
Возвращаемое значение: Значения Стиля - константы без учета регистра, которые связаны со специфичными методами показа линий обрамления. CSS константы стиля: dashed, dotted, double, groove, hidden, inset, none, outset, ridge & solid. Не все броузеры признают все эти значения в CSS рекомендации.
Значение по умолчанию: Ничего.
borderBottomWidth, borderLeftWidth, borderRightWidth, borderTopWidth
Доступ: Чтение/Изменение
Ширина одного края границы элемента. См. также свойство borderWidth.
Пример:
Код HTML:
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"
Возвращаемое значение: Три константы без учета регистра--thin | medium | thick--Позволите броузеру определять точно, сколько пикселов используются, чтобы показать границу. Для большей точности Вы можете также назначать значение длины.
Значение по умолчанию: medium
borderColor
Доступ: Чтение/Изменение
Цвет края границы
Пример:
Код HTML:
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 это свойство принимает один, два, три, или четыре значения цвета, в зависимости от того, сколько и какие границы Вы хотите установить с определенными цветами.
Значение по умолчанию: Цвет объекта (если установлен).
borderStyle
Доступ: Чтение/Изменение
Свойство которое позволяет Вам устанавливать один или несколько стилей границы. Для Internet Explorer Вы можете установить до 4 значений стиля (через пробел). Число значений определяет какие стороны получают назначенные цвета.
Пример:
Код HTML:
document.all.announce.style.borderStyle = "solid"
document.all.announce.style.borderStyle = "solid double"
document.all.announce.style.borderStyle = "double groove groove double"
Возвращаемое значение: Значения стиля - константы без учета регистра, связанные с определенными способами рендеринга линий обрамления. CSS константы стиля: dashed, dotted, double, groove, hidden, inset, none, outset, ridge и solid. Не все броузеры признают все значения CSS спецификации. В Internet Explorer, это свойство принимает один, два, три, или четыре значения, в зависимости от того, сколько и какие границы Вы хотите установить с определенными стилями.
Значение по умолчанию: Ничего
borderWidth
Доступ: Чтение/Изменение
Shortcut-свойство , которое позволяет Вам устанавливать ширину границы. Для Internet Explorer Вы можете установить 4 значения ширины через пробел (Навигатор 4 - свойство только для чтения). Число значений определяет, какие из сторон получат назначенные размеры.
Пример:
Код HTML:
document.all.founderQuote.style.borderWidth = "3px 5px"
Возвращаемое значение: Три константы без учета регистра--thin | medium | thick--позволяют броузеру определить точно, сколько пикселов используются для показа границы. Для большей точности Вы можете также назначать length. В Internet Explorer это свойство принимает одно, два, три, или четыре значения ширины в зависимости от того, сколько и какие границы Вы хотите установить с определенными размерами.
Значение по умолчанию: medium
clear
Доступ: Чтение/Изменение
Определяет, позволяет ли себе элемент быть отображенным в той же самой горизонтальной полосе как float элемент. Обычно рядом другой элемент имеет атрибут стиля float, установленный на left или right. Чтобы предотвратить перекрытие элементов, установите явно это свойство на ту же самую сторону (left или right). Если Вы не уверены, где могло бы происходить перекрытие, установите свойство явно на оба элемента. Элемент, чьё свойство явно установлено на значение, отличное от 0, представлен в начале строки ниже плавающего элемента.
Пример:
Код HTML:
document.all.myDiv.style.clear = "both"
Возвращаемое значение: Любая из следующих строковых констант (без учета регистра): both | left | Ничего | right.
Значение по умолчанию: Ничего
clip
Доступ: Чтение/Изменение
Определяет область отсечения элемента. Область отсечения - область слоя элемента, в которой он видим. Отсечение может не работать должным образом в Internet Explorer 4 для Macintosh.
Пример:
Код HTML:
document.all.art2.style.clip = "rect(5px 100px 40px 0)"
Возвращаемое значение: Строковой параметр без учета регистра или CSS clip атрибут, который определяет форму (rect) и позицию четырех граней относительно верхнего левого угла первоначального элемента. При определении длин для каждой стороны прямоугольника , соблюдайте по часовой стрелке порядок значений: top, right, bottom, left.
Значение по умолчанию: Ничего.
color
Доступ: Чтение/Изменение
Устанавливает приоритетный CSS атрибут цвета (текста).Можно устанавливать атрибут и для графических элементов, но все браузеры будут реализовывать это по разному.
Пример:
Код HTML:
document.all.specialDiv.style.color = "green"
Возвращаемое значение: Спецификация цвета CSS без учета регистра.
Значение по умолчанию: black
cssText
Доступ: Только чтение
Возвращает строку полного правила 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.
Пример:
Код HTML:
document.all.block3.style.cssText = "margin: 2px; font-size: 14pt"
Возвращаемое значение: Строковое значение атрибутов стиля, разграниченное точкой с запятой.
Значение по умолчанию: Ничего.
cursor
Доступ: Чтение/Изменение
Форма курсора, когда он над элементом. Точный вид курсоров зависит от операционной системы.Свойство затрагивает курсор, только когда он над текущим элементом.
Пример:
Код HTML:
if (event.altKey) { event.sourceElement.style.cursor = "help" }
Возвращаемое значение: Одна из "курсорных" строковых констант: auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | s-resize | se-resize | sw-resize | text | wait.
Значение по умолчанию: auto
display
Доступ: Чтение/Изменение
Должен ли элемент быть представлен в документе. Когда установлено none, элемент скрыт, и окружающее содержание заполняет пространство; когда установлено на "" (или любое другое значение), элемент отображен.
Пример:
Код HTML:
document.all.instructionDiv.style.display = ""
Возвращаемое значение: Или none, или пустая строка("").
Значение по умолчанию: Ничего.
filter
Доступ: Чтение/Изменение
Устанавливает визуальный фильтр. Визуальный фильтр может применяться к элементу, чтобы произвести эффекты типа зеркального отражения , жара, тени, и многих другие. Показанный фильтр применяется к элементу, когда его видимость изменяется. Это включает эффекты типа wipes, blinds и barn doors. Свойство filter доступно в Internet Explorer 4, но не работает в версии Macintosh.
Пример:
Код HTML:
document.all.fancy.style.filter= "dropshadow( )"
Возвращаемое значение: Каждое свойство filter может иметь больше одного типа фильтра (разграничивается пробелом). Каждый тип фильтра сопровождается парой круглых скобок (), которые могут передавать параметры о поведении фильтра для текущего элемента. Параметр состоит из пары "имя/значение"
Значение по умолчанию: Ничего.
font
Доступ: Чтение/Изменение
Свойство shorthand, которое позволяет Вам устанавливать одно или более связанное с шрифтом свойство (fontFamily, fontSize, fontVariant, и fontWeight) с одним оператором присваивания "=". Список разграниченных пробелом значений (в любой последовательности) применяется к определенным свойствам шрифта, для которых значение является имеющим силу типом.
Пример:
Код HTML:
document.all.subhead.style.font = "bolder small-caps 16pt"
Возвращаемое значение: См. соответствующие свойства
Значение по умолчанию: Ничего.
fontFamily
Доступ: Чтение/Изменение
Расположенный по приоритетам список используемых шрифтов.
Пример:
Код HTML:
document.all.subhead.style.fontFamily = "'Century Schoolbook' Times serif"
Возвращаемое значение: Любое число имен шрифтов, разграниченных пробелом. Названия(имена) семейства ёмкостью в несколько слов должны быть в кавычках. Признаются универсальные названия семейств: serif | sans-serif | cursive | fantasy | monospace.
Значение по умолчанию: По умолчанию для броузера.
fontSize
Доступ: Чтение/Изменение
Размер шрифта элемента. Размер шрифта может быть установлен несколькими способами. Коллекция констант (xx-small, x-small, small, medium, large, x-large, xx-large) определяет то, что известно как абсолютные размеры.
Другие коллекции констант (larger, smaller) известны как относительные размеры.
Наконец, Вы можете устанавливать fontSize в процентах, которые основаны на размере размера шрифта родительского элемента.
Пример:
Код HTML:
document.all.teeny.style.fontSize = "x-small"
Возвращаемое значение: Значения любой из следующих категорий без учета регистра . Для абсолютного размера, одна из следующих констант : xx-small | x-small | small | medium | large | x-large | xx-large. Для относительного размера одна из следующих констант : larger | smaller.
Значение по умолчанию: Размер шрифта родительского элемента.
fontSizeAdjust
Доступ: Чтение/Изменение
Контролирует значение длины вторичного семейства шрифтов так, чтобы его символы имели ту же высоту, что и символы основного семейства шрифтов.
Пример:
Код HTML:
document.all.teeny.style.fontSizeAdjust = "1.05"
Возвращаемое значение: Любое число или none
Значение по умолчанию: none
fontStretch
Доступ: Чтение/Изменение
Контролирует ширину симвлов шрифта при отображении
Пример:
Код HTML:
document.all.teeny.style.fontStretch = "expanded"
Возвращаемое значение: Любое число или none
Значение по умолчанию: none
fontStyle
Доступ: Чтение/Изменение
Представлен ли элемент как normal, italic или oblique. Если fontFamily включает типы шрифта, помеченные как Italic и/или Oblique, установка атрибута fontStyle вызывает эти специфические типы шрифта.Но если специализированные типы шрифта не доступны в системе, normal тип шрифта обычно изначально выглядит курсивным. Страница, посланная на печать с такими параметрами настройки шрифта полагается на хорошую согласованность между клиентским компьютером и принтером, чтобы выполнить на аппаратном уровне сгенерированное курсивное начертание шрифта.
Пример:
Код HTML:
document.all.emphasis.style.fontStyle= "italic"
Возвращаемое значение: Internet Explorer 4 признает следующие строковые значения: normal | italic | oblique, но брабатывает и italic, и oblique как italic.
Значение по умолчанию: Ничего.