изменение цвета и стиля при нажатии кнопки с использованием объектной модели документа

Question

Напишите программу для изменения цвета элемента div, его плавающего стиля и границы по нажатию кнопки, используя объектную модель документа.

Answer 1

Скажем, у вас есть div, например:

<div id="my-div"></div>

Затем вы можете использовать javascript для загрузки элемента в переменную:

var myDiv = document.getElementById('my-div');

После того, как вы сделали что вы изменяете любое из его свойств, используя общий шаблон:

element.style.property = value;

Например, чтобы изменить цвет на красный, вы должны сделать:

myDiv.style.color = 'red';

Чтобы получить элемент чтобы отреагировать на нажатие кнопки, назначьте прослушиватель событий.

myDiv.addEventListener('click', myFunction, false);

Теперь нам нужно определить, что мы хотим myFunction. Если мы хотим, чтобы цвет изменился на красный, мы могли бы определить его следующим образом:

function myFunction() {
  myDiv.style.color = 'red';
}

Вот фрагмент рабочего кода этого скрипта:

var myDiv = document.getElementById('my-div');
myDiv.addEventListener('click', myFunction, false);

function myFunction() {
  myDiv.style.color = 'red';
}

<div id="my-div">Here is some text.</div>

Нажмите на текст, и он станет красным! Вы можете сделать то же самое для других свойств, которые вы хотите изменить.