WEB start

Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17

hit 
counter

Наши преимущества

  • Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
  • Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
  • Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
  • Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.


Регистрация на сайте

DOM Styles

DOM - объекты CSS

Определения

Свойство (property) - название стиля.

Значение (value) - значение свойства.

Селектор (selector) - переключатель, идентификатор набора стилей (блока стилей)

Блок стилей (block) - набор описаний стилей (declarations), который заключается в фигурные скобки ({}).

Правило (rule или набор правил -rule set)- селектор стиля плюс блок стилей.

Декларация (declaration ) - строка-описание стиля. Внутри одного блока (между фигурными скобками) может быть находиться одна декларация или несколько, разделённых символом (;). Декларация состоит из свойства (property), после которого ставится двоеточие (:) после этого символа - значение этого свойства (value ), после этого - символ точка с запятой (;).

Объект DOM - Style

Отражает свойства стилей элемента (inline styles). Отражает те свойства стилей, которые заданы атрибутом style.

Задать атрибут style (нужно иметь в виду, что если этот атрибут уже был задан, его старое значение будет удалено)

element.setAttribute("style", "background-color: red;");

Удалить атрибут (и все inline стили элемента)

element.removeAttribute("style")

Модифицировать параметры атрибута style (изменение свойс объекта style для элемента).

element.style.backgroundColor = "red";

 

Свойства объекта style

 

Свойство Описание Версия
CSS
alignContent Устанавливает или возвращает выравнивание между линиями внутри гибкого контейнера, когда элементы не используют все свободное пространство 3
alignItems Устанавливает или возвращает выравнивание элементов внутри гибкого контейнера 3
alignSelf Устанавливает или возвращает выравнивание для выбранных элементов внутри гибкого контейнера 3
animation Сокращённое свойство для всех свойств анимации, приведённых ниже, за исключением свойства animationPlayState 3
animationDelay Устанавливает или возвращает, когда анимация начнется 3
animationDirection Устанавливает или возвращает, должна ли анимация воспроизводиться в обратном порядке на альтернативных циклах 3
animationDuration Устанавливает или возвращает количество секунд или миллисекунд, которое требуется анимации для завершения одного цикла 3
animationFillMode Устанавливает или возвращает значения, которые применяются анимацией за пределами времени ее выполнения 3
animationIterationCount Устанавливает или возвращает количество раз, когда должна воспроизводиться анимация 3
animationName Устанавливает или возвращает имя для анимации @keyframes 3
animationTimingFunction Устанавливает или возвращает кривую скорости анимации 3
animationPlayState Устанавливает или возвращает, работает анимация или приостановлена 3
background Устанавливает или возвращает все свойства фона в одной директиве 1
backgroundAttachment Устанавливает или возвращает фиксированное фоновое изображение или прокручивает страницу 1
backgroundColor Устанавливает или возвращает фоновый цвет элемента 1
backgroundImage Устанавливает или возвращает фоновое изображение для элемента 1
backgroundPosition Устанавливает или возвращает начальную позицию фонового изображения 1
backgroundRepeat Устанавливает или возвращает как повторять (мозаику) фоновое изображение 1
backgroundClip Устанавливает или возвращает область рисования фона 3
backgroundOrigin Устанавливает или возвращает область позиционирования фоновых изображений 3
backgroundSize Устанавливает или возвращает размер фонового изображения 3
backfaceVisibility Устанавливает или возвращает, должен ли элемент быть видимым, если он не обращен к экрану 3
border Устанавливает или возвращает borderWidth, borderStyle и borderColor в одном объявлении 1
borderBottom Устанавливает или возвращает все свойства borderBottom в одном объявлении 1
borderBottomColor Устанавливает или возвращает цвет нижней границы 1
borderBottomLeftRadius Устанавливает или возвращает форму границы нижнего левого угла 3
borderBottomRightRadius Устанавливает или возвращает форму границы нижнего правого угла 3
borderBottomStyle Устанавливает или возвращает стиль нижней границы 1
borderBottomWidth Устанавливает или возвращает ширину нижней границы 1
borderCollapse Устанавливает или возвращает, должна ли граница таблицы быть свернута в одну границу или нет 2
borderColor Устанавливает или возвращает цвет границы элемента (может иметь до четырех значений) 1
borderImage Стеновое свойство для установки или возврата всех свойств borderImage 3
borderImageOutset Устанавливает или возвращает величину, на которую область изображения границы выходит за пределы поля 3
borderImageRepeat Устанавливает или возвращает, следует ли повторять, округлять или растягивать границу изображения 3
borderImageSlice Устанавливает или возвращает внутренние смещения границы изображения 3
borderImageSource Устанавливает или возвращает изображение, которое будет использоваться в качестве границы 3
borderImageWidth Устанавливает или возвращает ширину границы изображения 3
borderLeft Устанавливает или возвращает все свойства borderLeft в одном объявлении 1
borderLeftColor Устанавливает или возвращает цвет левой границы 1
borderLeftStyle Устанавливает или возвращает стиль левой границы 1
borderLeftWidth Устанавливает или возвращает ширину левой границы 1
borderRadius Сокращенное свойство для установки или возврата радиусавсех четырех границ 3
borderRight Устанавливает или возвращает все свойства borderRight в одном объявлении 1
borderRightColor Устанавливает или возвращает цвет правой границы 1
borderRightStyle Устанавливает или возвращает стиль правой границы 1
borderRightWidth Устанавливает или возвращает ширину правой границы 1
borderSpacing Устанавливает или возвращает пробел между ячейками в таблице 2
borderStyle Устанавливает или возвращает стиль границы элемента (может иметь до четырех значений) 1
borderTop Устанавливает или возвращает все свойства borderTop в одном объявлении 1
borderTopColor Устанавливает или возвращает цвет верхней границы 1
borderTopLeftRadius Устанавливает или возвращает форму границы верхнего левого угла 3
borderTopRightRadius Устанавливает или возвращает форму границы верхнего правого угла 3
borderTopStyle Устанавливает или возвращает стиль верхней границы 1
borderTopWidth Устанавливает или возвращает ширину верхней границы 1
borderWidth Устанавливает или возвращает ширину границы элемента (может иметь до четырех значений) 1
bottom Устанавливает или возвращает нижнее положение позиционированного элемента 2
boxDecorationBreak Устанавливает или возвращает поведение фона и границы элемента при разрыве страницы или для встроенных элементов при разрыве строки. 3
boxShadow Прикрепляет к коробке одну или несколько отбрасываемых теней 3
boxSizing Позволяет определить для определенных элементов способ размещения в определенной области 3
captionSide Устанавливает или возвращает позицию заголовка таблицы 2
clear Устанавливает или возвращает позицию элемента относительно плавающих объектов 1
clip Устанавливает или возвращает часть видимого элемента 2
color Устанавливает или возвращает цвет текста 1
columnCount Устанавливает или возвращает количество столбцов, на которые элемент должен быть разделен 3
columnFill Устанавливает или возвращает способ заполнения столбцов 3
columnGap Устанавливает или возвращает промежуток между столбцами 3
columnRule Стеновое свойство для установки или возврата всех свойств columnRule 3
columnRuleColor Устанавливает или возвращает цвет линии-разделителя между столбцами 3
columnRuleStyle Устанавливает или возвращает стиль линии-разделителя между столбцами 3
columnRuleWidth Устанавливает или возвращает ширину линии-разделителя между столбцами 3
columns Сокращенное свойство для установки или возврата columnWidth и columnCount 3
columnSpan Устанавливает или возвращает, сколько столбцов должен занимать элемент 3
columnWidth Устанавливает или возвращает ширину столбцов 3
content Используется с: :before and :after псевдоэлементами, для вставки сгенерированного содержимого 2
counterIncrement Увеличивает один или несколько счетчиков 2
counterReset Создает или сбрасывает один или несколько счетчиков 2
cursor Устанавливает или возвращает тип курсора для отображения указателя мыши 2
direction Устанавливает или возвращает направление текста 2
display Устанавливает или возвращает тип отображения элемента 1
emptyCells Устанавливает или возвращает, показывать границу и фон пустых ячеек, или нет 2
filter Устанавливает или возвращает фильтры изображений (визуальные эффекты, такие как размытие и насыщенность) 3
flex Устанавливает или возвращает длину элемента относительно остальных 3
flexBasis Устанавливает или возвращает начальную длину гибкого элемента 3
flexDirection Устанавливает или возвращает направление гибких элементов 3
flexFlow Сокращенное свойство свойств flexDirection и flexWrap 3
flexGrow Устанавливает или возвращает, насколько элемент будет расти относительно остальных 3
flexShrink Устанавливает или возвращает, как элемент будет уменьшаться относительно остальных 3
flexWrap Устанавливает или возвращает, устанавливать ли свойство wrap для flex - элементов 3
cssFloat Устанавливает или возвращает горизонтальное выравнивание элемента 1
font Устанавливает или возвращает fontStyle, fontVariant, fontWeight, fontSize, lineHeight, and fontFamily в одном объявлении 1
fontFamily Устанавливает или возвращаетсемейство шрифта 1
fontSize Устанавливает или возвращает размер текста 1
fontStyle Устанавливает или возвращает стиль шрифта 1
fontVariant Устанавливает или возвращает модификацию шрифта 1
fontWeight Устанавливает или возвращает толщину линии шрифта 1
fontSizeAdjust Preserves the readability of text when font fallback occurs 3
fontStretch Выбирает нормальное, сжатое или расширенное написание из семейства шрифтов 3
hangingPunctuation Указывает, может ли знак пунктуации быть помещен вне блока строки 3
height Устанавливает или возвращает высоту элемента 1
hyphens Устанавливает, как разделять слова для улучшения макета абзацев 3
icon Предоставляет автору возможность стилизовать элемент под иконку 3
imageOrientation Определяет поворот вправо или в направлении по часовой стрелке, который браузер применяет к изображению 3
justifyContent Устанавливает или возвращает выравнивание между элементами внутри гибкого контейнера, когда элементы не используют все доступное пространство 3
left Устанавливает или возвращает левую позицию позиционируемого элемента 2
letterSpacing Устанавливает или возвращает пробел между символами в тексте 1
lineHeight Устанавливает или возвращает расстояние между строками в тексте 1
listStyle Устанавливает или возвращает listStyleImage, listStylePosition и listStyleType в одном объявлении 1
listStyleImage Устанавливает или возвращает изображение для маркера элемента списка 1
listStylePosition Устанавливает или возвращает позицию для маркера элемента списка 1
listStyleType Устанавливает или возвращает типмаркера списка 1
margin Устанавливает или возвращает внешние отступы элемента (может иметь до четырех значений) 1
marginBottom Устанавливает или возвращает нижний отступ элемента 1
marginLeft Устанавливает или возвращает левый отступ элемента 1
marginRight Устанавливает или возвращает правый отступ элемента 1
marginTop Устанавливает или возвращает верхний отступ элемента 1
maxHeight Устанавливает или возвращает максимальную высоту элемента 2
maxWidth Устанавливает или возвращает максимальную ширину элемента 2
minHeight Устанавливает или возвращает минимальную высоту элемента 2
minWidth Устанавливает или возвращает минимальную ширину элемента 2
navDown Устанавливает или возвращает, куда следует перемещаться при использовании клавиши со стрелкой вниз 3
navIndex Устанавливает или возвращает порядок табуляции для элемента 3
navLeft Устанавливает или возвращает, куда следует перемещаться при использовании клавиши навигации со стрелкой влево 3
navRight Устанавливает или возвращает, куда следует перемещаться при использовании клавиши навигации со стрелкой вправо 3
navUp Устанавливает или возвращает туда, куда следует перемещаться при использовании клавиши навигации со стрелкой 3
opacity Устанавливает или возвращает уровень непрозрачности для элемента 3
order Устанавливает или возвращает порядок гибкого элемента относительно остальных 3
orphans Устанавливает или возвращает минимальное количество строк для элемента, который должен быть оставлен в нижней части страницы, когда разрыв страницы происходит внутри элемента 2
outline Устанавливает или возвращает все свойства обводки (контура) в одном объявлении 2
outlineColor Устанавливает или возвращает цвет контура вокруг элемента 2
outlineOffset Смещает контур и вытягивает его за пределы края 3
outlineStyle Устанавливает или возвращает стиль контура вокруг элемента 2
outlineWidth Устанавливает или возвращает ширину контура вокруг элемента 2
overflow Устанавливает или возвращает, что делать с содержимым, которое отображается вне поля элемента 2
overflowX Указывает, что делать с левыми / правыми краями содержимого, если он переполняет область содержимого элемента 3
overflowY Указывает, что делать с верхними / нижними краями содержимого, если оно переполняет область содержимого элемента 3
padding Устанавливает или возвращает внутренние отступы элемента (может иметь до четырех значений) 1
paddingBottom нижний отступ 1
paddingLeft левый отступ 1
paddingRight правый отступ 1
paddingTop верхний отступ 1
pageBreakAfter Устанавливает или возвращает поведение разрыва страницы после элемента 2
pageBreakBefore Устанавливает или возвращает поведение разрыва страницы до элемента 2
pageBreakInside Устанавливает или возвращает поведение разрыва страницы внутри элемента 2
perspective Устанавливает или возвращает перспективу просмотра 3D-элементов 3
perspectiveOrigin Устанавливает или возвращает нижнюю позицию трехмерных элементов 3
position Устанавливает или возвращает тип метода позиционирования, используемый для элемента (статический, относительный, абсолютный или фиксированный) 2
quotes Устанавливает или возвращает тип кавычек для встроенных котировок 2
resize Устанавливает или возвращает, может ли пользователь изменять размер элемента 3
right Устанавливает или возвращает правое положение позиционируемого элемента 2
tableLayout Устанавливает или возвращает способ компоновки ячеек, строк и столбцов таблицы 2
tabSize Устанавливает или возвращает длину (колич пробелов) символа табуляции 3
textAlign Устанавливает или возвращает горизонтальное выравнивание текста 1
textAlignLast Устанавливает или возвращает, как последняя строка блока или строка прямо перед выравниванием принудительной строки выравнивается, когда выравнивание текста - "justify" 3
textDecoration Устанавливает или возвращает оформление текста 1
textDecorationColor Устанавливает или возвращает цвет оформления текста 3
textDecorationLine Устанавливает или возвращает тип строки в текстовом оформлении 3
textDecorationStyle Устанавливает или возвращает стиль линии для оформления текста 3
textIndent Устанавливает или возвращает отступ первой строки текста 1
textJustify Устанавливает или возвращает метод выравнивания, используемый, когда text-align установлено "justify" 3
textOverflow Устанавливает или возвращает то, что должно произойти, когда текст переполняет содержащий элемент 3
textShadow Устанавливает или возвращает теневой эффект текста 3
textTransform Устанавливает или возвращает капитализацию текста 1
top Устанавливает или возвращает верхнее положение позиционированного элемента 2
transform Применяет преобразование 2D или 3D к элементу 3
transformOrigin Устанавливает или возвращает позицию преобразованных элементов 3
transformStyle Устанавливает или возвращает способ отображения вложенных элементов в 3D-пространстве 3
transition Стеновое свойство для установки или возврата четырех свойств перехода (transition) 3
transitionProperty Устанавливает или возвращает свойство CSS, для которого применяется эффект перехода 3
transitionDuration Устанавливает или возвращает количество секунд или миллисекунд, которое требуется для перехода 3
transitionTimingFunction Устанавливает или возвращает кривую скорости эффекта перехода 3
transitionDelay Устанавливает или возвращает, когда эффект перехода начнется 3
unicodeBidi Устанавливает или возвращает, должен ли текст переопределяться для поддержки нескольких языков в одном документе 2
verticalAlign Устанавливает или возвращает вертикальное выравнивание содержимого в элементе 1
visibility Устанавливает или возвращает, должен ли элемент быть видимым 2
whiteSpace Устанавливает или возвращает способ обработки вкладок, разрывов строк и пробелов в тексте 1
width Устанавливает или возвращает ширину элемента 1
wordBreak Устанавливает или возвращает правила нарушения строки для не-CJK-скриптов 3
wordSpacing Устанавливает или возвращает расстояние между словами в тексте 1
wordWrap Позволяет разбивать длинные, неразделяемые слова и перенести на следующую строку 3
widows Устанавливает или возвращает минимальное количество строк для элемента, который должен быть видимым в верхней части страницы 2
zIndex Устанавливает или возвращает порядок по вертикали позиционированного элемента 2

 

Объект styleSheet (CSSStyleSheet)

Объект «StyleSheet» позволяет просматривать листы стилей документа, добавлять или удалять правила в одном из них.

Получить перечень листов стилей для документа

var styleSheetList = document.styleSheets;

Добавить элемент STYLE - создать из него новый объект CSSStyleSheet

document.createElement('style'); css1.type = 'text/css'; css1.innerText = 'body { background: #FEE; } '; document.head.appendChild(css1);

Добавить элемент LINK - добавить из файла стили и на этой базесоздать новый объект CSSStyleSheet

var s = document.createElement('link'); s.type = 'text/css'; s.rel = 'stylesheet'; s.href = 'file.css'; document.head.appendChild(s); var myCSSStyleSheetObj = Object.create(document.styleSheets[0])

 

Свойства

Свойство Описание 
cssRules[] Возвращает массив, содержащий все правила CSS таблицы
cssText Свойство Read / Write, содержащее все содержимое таблицы стилей.
disabled Свойство Read / write, которое указывает, отключена ли таблица стилей или нет. Значение по умолчанию - false.
href Свойство «Read/write», которое содержит URL-адрес листа стилей
media Указывает устройство для таблицы стилей. Значение по умолчанию - «экран».
ownerNode Ссылки на узел дерева документов, который содержит текущую таблицу стилей. Для обычных HTML-страниц ownerNode обычно возвращает элемент LINK или STYLE в таблице стилей.
ownerRule Для таблиц стилей, которые определяются с помощью правила @import, возвращается объект CSSImportRule.
owningElement Ссылки на узел дерева документов, который содержит текущую таблицу стилей. IE только свойство. В NS6 + / Firefox эквивалент «ownerNode».
parentStyleSheet Для таблиц стилей, которые включены на странице с помощью правила @page, @import родительский стиль StyleSheet ссылается на таблицу стилей верхнего уровня. Для стандартных таблиц стилей LINK или STYLE это свойство возвращает null.
rules[] Возвращает массив, содержащий все правила CSS таблицы стилей. IE только. В NS6 + / Firefox вместо этого используется cssRules []. С помощью правил [] можно добавлять, удалять или изменять существующие правила в таблице стилей.
title Возвращает значение атрибута title таблицы стилей, если оно определено.
type Возвращает значение атрибута type таблицы стилей.

Методы

Метод Описание
addRule(selector, declaration, [index]) Метод для IE? который добавляет новое правило в styleSheet/ Параметр selector - селектор правила ("p", "div b"), declaration - набор свойств правила ("background-color: yellow; color: brown"). Необязательный параметр - "index" позволяет указать позицию нового правила в таблице стилей.
removeRule([index]) Метод, который удаляет первое правило таблицы стилей. Необязательный индекс (целое число) позволяет удалить определенное правило на основе его позиции в коллекции правил [].
deleteRule(index) Удаляет правило из таблицы стилей, основываясь на его позиции в коллекции cssRules []. Параметр «index» (integer) используется, чтобы указать эту позицию.
insertRule(rule, index) Вставляет новое правило в таблицу стилей, где параметр «rule» - это строка, содержащая все добавляемое правило (например: #myid {color: red; border: 1px solid black}) и «index» - целое число, определяющее положение внутри cssRules [].

Объект CSS Rules

Свойство Описание
cssText Возвращает содержимое правила css целиком, от селектора до соответствующих объявлений CSS. Полезное свойство для простого поиска внутри правила, позволяющее увидеть как селектор, так и все сразу правила.
length Возвращает длину объекта CSS Rule (cssRules.length или rules.length), другими словами, количество правил в таблице стилей.
parentStyleSheet Возвращает объект styleSheet, который содержит текущее правило.
selectorText Возвращает часть правила - селектор.
style Даёт доступ для чтения-записи к отдельным атрибутам, заданным в правиле. Аналогично inline объекту "style" элемента DOM.