WEB start
Компьютеры. Интернет. Профессиональное обучение. 055-966-10-17
Программирование на JavaScript, DOM
- DOM - обработка событий (Events)
- DOM - объекты CSS
- DOM объект - Element
- DOM объект - window
- DOM объект Document
- DOM объект Window
- DOM объекты браузера
- JavaScript - массивы (Array)
- JavaScript - объект Date
- JavaScript - объект Math
- JavaScript - объекты
- JavaScript - операторы языка
- JavaScript - работа со строками
- JavaScript AJAX
- JavaScript регулярные выражения
- Программирование на JavaScript, DOM
Наши преимущества
- Наши программы обучения ориентированы на конкретного слушателя. Вы можете обучаться по одной из предложенных Вам программ, а можете самостоятельно составить, откорректировать, откорректировать свою персональную программу обучения. Преподаватель, консультант помогают Вам сориентироваться в материале курса при выборе программы обучения.
- Обучение индивидуальное. Преподаватель проводит занятие только для Вас, ориентируясь на Ваши возможности, предыдущие знания и опыт, скорость восприятия нового материала.
- Вы учитесь в удобное для Вас время, в удобной для Вас форме, может быть выбран гибкий график занятий, в соответствии с Вашими возможностями и пожеланиями.
- Обучение проводится дистанционно. Вы можете обучаться, сидя за Вашим компьютером дома или на работе, не тратя время на поездки к месту обучения.
Регистрация на сайте
Дополнительные материалы
- API WEB - уведомлений (Notifications)
- CSS - шрифты
- CSS3 адаптивные блоки (Flex Box Model)
- HTML5 - элемент CANVAS, рисование
- HTML5 семантические элементы
- Joomla, компонент Sourcerer
- Visual Studio Code для HTML, CSS, SASS, JavaScript
- WordPress - дочерние темы
- Вставка видео в HTML документ
- Построение многоязычных сайтов на CMS WordPress
- Создание шаблонов для Joomla 3.x
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. |