В данной записи я расскажу как с помощью 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>