Читать учебники:
HTML, CSS, JavaScript, DOM
PHP, MySQL, Apache, WordPress
Photoshop, Веб-дизайн, Flat
SEO, SMM, Landing Page

style

style — объект DOM

Урок №4
Объект style
Style - это встроенный объект DOM.

style — это объект DOM, который хранит в себе все CSS-свойства.

На данный момент, у нас есть скрипт который увеличивает шрифт текста элемента, при нажатии на кнопку. Давайте делаем так, чтобы при нажатии на кнопку, шрифт не только увеличивался но еще изменял свой цвет на зелёный green, стиль начертания на наклонный oblique, имя шрифта на Arial, также добавим зелёную сплошную грaницу толщиной в 1px, внешние и внутренние отступы сделаем 10px и 20px соответственно.

В языке CSS данный код выглядел бы следующим образом:

#changeEl {
 font-size: 25px;
 color: green;
 font-style: oblique;
 font-family: Arial;
 border: 1px solid green;
 margin: 10px;
 padding: 20px;
}

Однако нам нужно, чтобы данный код подключался, только при нажатии на кнопку, для этого нам понадобится технология DOM и её объект style

 function getChangeEl() {
  document.getElementById("changeEl").style.fontSize="25px";
  document.getElementById("changeEl").style.color="green";
  document.getElementById("changeEl").style.fontStyle="oblique";
  document.getElementById("changeEl").style.fontFamily="Arial";
  document.getElementById("changeEl").style.border="1px solid green";
  document.getElementById("changeEl").style.margin="10px";
  document.getElementById("changeEl").style.padding="10px";
 }

Смотреть работу скрипта.

Как вы могли заметить, свойства объекта style, идентичны CSS-свойствам, единственная разница между ними, так это то что названия CSS-свойств состоящих из двух и более слов, например font-size, в скриптах DOM нужно записывать слитно, а второе и последующие слова должны начинаться с большой буквы, например fontSize.

Читать далее: Свойство innerHTML

Вам понравились уроки? Поддержите проект "Учебники для вебмастера"!
Можете отправить с карточки, мобильного телефона или яндекс.кошелька.
Минимальная сумма перевода 30 руб.

Категория: Статья
Статья создана: 17 Окт 2014
Статья обновлена: 5 Фев 2016

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

gabdrahimov.ru - сайт для веб-разработчиков
(c) При использовании материалов, ссылка на сайт обязательна
Автор: Габдрахимов Дамир Google
e-mail: gabdr0[at]ya.ru
разработка сайта - gabdr0
бесплатный PHP хостинг (без рекламы!) - Beget