style

style — объект DOM

Урок №4
Объект style

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

• Category: Разное