Назад Вперед Зміст

Робота з атрибутами.

Елементам DOM, з іншого боку, відповідають HTML-теги, які мають текстові атрибути.

Звичайно, тут йдеться саме про вузли-елементи, не про текстові вузли чи коментарі.

    Доступ до атрибутів здійснюється за допомогою стандартних методів:
  1. elem.hasAttribute(name) – перевіряє наявність атрибуту
  2. elem.getAttribute(name) – отримує значення атрибуту
  3. elem.setAttribute(name, value) – встановлює атрибут
  4. elem.removeAttribute(name) – видаляє атрибут

Ці методи працюють із значенням, що знаходиться в HTML.

Також усі атрибути елемента можна отримати за допомогою властивості elem.attributes, яка містить псевдомасив об'єктів типу Attr.

А тепер — завдання.

Приклад 3.

Даний <div> розміру 300*100, текстове поле та кнопка.

У текстове поле ми вводимо відсоток заповнення <div> салатовим кольором (за допомогою ще одного <div>).

При натисканні на кнопку див заповнюється на цей відсоток.Рамка змінюється на помаранчеву товщину 5px

Код нижче показує:

  • перебір усіх атрибутів за допомогою циклу (attrs.length – кількість атрибутів),
  • attrs[i] або attrs.item(i) – звернення до атрибуту в колекції за його порядковим номером,
  • attrs[i].name – ім'я атрибута,attrs[i].value – значення атрибута (за допомогою нього можна також змінити значення атрибута),
  • надаємо значення атрибуту за допомогою властивості value,
  • встановлюємо атрибут елементу

    Розмітка:

    Скрипт:

    Результат:

    Назад Вперед Зміст