JavaScript атрибут элемента

В данной записи я расскажу как с помощью JavaScript добавить, удалить, изменить и получить значение атрибута элемента. В JavaScript для работы с атрибутами существуют следующие функции:

  • setAttribute
  • getAttribute
  • hasAttribute
  • removeAttribute

Добавить или изменить атрибут

setAttribute — функция добавляет новый атрибут или изменяет значение существующего атрибута по указанному элементу.

Синтаксис функции:

element.setAttribute(name, value);
  • name — задает имя атрибута.
  • value — указывает новое значение атрибута.

В примере я использую функцию setAttribute чтобы добавить атрибут disabled для элемента <button>:

<button id="btn">Hello World</button>

<script>
var b = document.querySelector("#btn");
b.setAttribute("disabled", "disabled");
</script>

Получить значение атрибута

getAttribute — функция вернет значение указанного атрибута элемента.

Синтаксис функции:

var attribute = element.getAttribute(attributeName);
  • attribute — строка содержащая значение атрибута.
  • attributeName — имя атрибута, значение которого вы хотите получить.

В примере я использую функцию getAttribute чтобы получить значение атрибута элемента <div>:

<div id="div1" align="center">Hello World</div>

<script>
var div1 = document.getElementById("div1");
var align = div1.getAttribute("align");

alert(align);
</script>

Проверить наличие атрибута

hasAttribute — метод возвращает логическое значение, указывающее, имеет ли элемент указанный атрибут или нет.

Синтаксис функции:

var result = element.hasAttribute(attName);
  • result — значение true или false.
  • AttName — задает имя атрибута.

В примере я использую функцию hasAttribute чтобы проверить наличие атрибута align="center" для элемента <div>:

<div id="div1" align="center">Hello World</div>

<script>
var d = document.getElementById("div1");

if (d.hasAttribute("align")) {
    alert("align center");
}
</script>

Удалить атрибут

removeAttribute — удаляет атрибут из указанного элемента.

Синтаксис функции:

element.removeAttribute(attrName);
  • attrName — строка с именем атрибута, который нужно удалить.

В примере я использую функцию removeAttribute чтобы удалить атрибут align="center" для элемента <div>:

<div id="div1" align="center">Hello World</div>

<script>
document.getElementById("div1").removeAttribute("align");
</script>

Читайте также: