В данной записи я расскажу как с помощью JavaScript добавить, удалить, изменить и получить значение атрибута элемента. В JavaScript для работы с атрибутами существуют следующие функции:
setAttributegetAttributehasAttributeremoveAttribute
Добавить или изменить атрибут
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>