Примеры
к занятиям по JavaScript
<< Соответствие стилей CSS и JavaScript
Из таблицы видно, что существует четкое соответствие между свойствами стиля CSS и свойствами объекта STYLE JavaScript. Ссылки сделаны на соответствующие разделы справочника по CSS, где более подробные описания, указаны допустимые значения свойств стиля и приведены примеры.
| JavaScript | 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 | Позиционный уровень блока |
vvz.nw.ru > JavaScript