Атрибуты (как добавить, изменить значение, удалить) | JavaScript

Узнать какие атрибуты и с какими значениями есть у тега

<button type="button" id="raz">нажать</button>

<script>
document.getElementById('raz').onclick = function() {
  var a = this.attributes;
  for (var i=0; i<a.length; i++) {
    alert(a[i].name + " = " + a[i].value);
  }
}
</script>

Свойства/атрибуты элемента в JS

В JavaScript у тегов есть свойства. Они чаще называются также, как атрибуты (см. подробнее на javascript.ru). Вот некоторый малый их список:

Атрибут Свойство
id id
class className
value value
data-myname dataset.myname

Проверить есть ли атрибут у тега

 <button type="button" onclick="alert(this.hasAttribute('data-z'));">нажать</button>
 <button type="button" onclick="if (!this.dataset.z) alert('Атрибут data-z отсутствует');">нажать</button>
 <button type="button" data-z onclick="if (!this.dataset.z) alert('Атрибут data-z отсутствует');">нажать</button>
 <button type="button" data-z="" onclick="if (!this.dataset.z) alert('Атрибут data-z отсутствует');">нажать</button>
 <button type="button" data-z="8" onclick="if (!this.dataset.z) alert('Атрибут data-z отсутствует');">нажать</button>
dataset в отличии от большинства атрибутов возвращает undefined
 <button type="button" onclick="if (this.dataset.z == false) alert('Атрибут data-z отсутствует');">нажать</button>
 <button type="button" data-z onclick="if (this.dataset.z == false) alert('Атрибут data-z отсутствует');">нажать</button>
 <button type="button" data-z="" onclick="if (this.dataset.z == false) alert('Атрибут data-z отсутствует');">нажать</button>
 <button type="button" data-z="8" onclick="if (this.dataset.z == false) alert('Атрибут data-z отсутствует');">нажать</button>

 <input type="button" onclick="if (this.value == false) alert('Атрибут value отсутствует');"/>
 <button type="button" onclick="if (this.dataset.z == '') alert('Атрибут data-z отсутствует');">нажать</button>
 <button type="button" data-z onclick="if (this.dataset.z == '') alert('Атрибут data-z отсутствует');">нажать</button>
 <button type="button" data-z="" onclick="if (this.dataset.z == '') alert('Атрибут data-z отсутствует');">нажать</button>
 <button type="button" data-z="8" onclick="if (this.dataset.z == '') alert('Атрибут data-z отсутствует');">нажать</button>

 <input type="button" onclick="if (this.value == '') alert('Атрибут value отсутствует');"/>

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

 <button type="button" onclick="alert(this.getAttribute('type'));">нажать</button>
href возвращает полный URL
нажать <a href="/2013/01/absolute-relative-links.html" onclick="alert(this.getAttribute('href')); return false;">нажать</a>
нажать <a href="/2013/01/absolute-relative-links.html" onclick="alert(this.href); return false;">нажать</a>
checked возвращает true/false (здесь больше примеров)
 <input type="checkbox" onclick="alert(this.getAttribute('checked'));">
 <input type="checkbox" onclick="alert(this.checked);">

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

 <button type="button" onclick="this.setAttribute('class', 'vydelit');">нажать</button>
у атрибута style для каждого свойства есть свой метод
 <button type="button" onclick="this.style.color='#FB4802'; this.style.fontWeight='bold'; alert(this.getAttribute('style'));">нажать</button>
value = то, что пользователь вводит в текстовое поле; value не меняет значения атрибута;
setAttribute меняет значение атрибута и первоначальный value, до тех пор, пока пользователь что-то не ввёл
<style>
input[value="new"]{
   border: 3px solid red;   
}
</style>

 <input type="text" onclick="this.value = 'new'; alert('this.value: '+this.value+'\nthis.getAttribute(value): '+this.getAttribute('value'));"/>
 <input type="text" onclick="this.setAttribute('value', 'new'); alert('this.value: '+this.value+'\nthis.getAttribute(value): '+this.getAttribute('value'));"/>
 <input type="text" oninput="this.setAttribute('value', this.value);>

В последнем примере одновременно меняется свойство value и атрибут value
ещё раз про dataset
 <button type="button" onclick="this.className = this.className + ' единственный'; alert(this.className);">нажать</button>
 <button type="button" onclick="this.dataset.z = this.dataset.z + ' единственный'; alert(this.dataset.z);">нажать</button>
 <button type="button" onclick="if (this.dataset.z == undefined) {this.dataset.z = ' единственный'} else {this.dataset.z = this.dataset.z + ' единственный'} alert(this.dataset.z);">нажать</button>

Полезно знать, когда в цикле пишешь this.dataset.z += x. В строке сначала идёт undefined, а затем прибавляются другие значения.

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

 <button class="vydelit" type="button" onclick="this.removeAttribute('class');">нажать</button>
у атрибута class может быть несколько значений, разделённых пробелами, для него есть специальный метод classList.*
 <button class="kod-comments vydelit" type="button" onclick="this.classList.remove('vydelit');">нажать</button>
ещё раз про value

<input type="text" value="изменить текст, нажать кнопку"/><button type="button" onclick="this.previousSibling.removeAttribute('value');">очистить поле</button>

Тег input изначально имеет атрибут value="изменить текст, нажать кнопку". Свойство value также имеет значение "изменить текст, нажать кнопку". Пользователь изменяя текст в поле input, меняет свойство value. Атрибут value остановится тем же "изменить текст, нажать кнопку". Если в поле не менять текст и сразу нажать на кнопку, то удалится атрибут value и свойство value. При повторном нажатии на кнопку ничего происходить не будет, так атрибута value и так нет, а на свойство value, если посетитель сайта что-то заполнил в input, removeAttribute не влияет. Если сразу в поле поменять текст, а потом нажать на кнопку, то атрибут value удалится, а текст поля не очистится ни разу, так как removeAttribute сразу перестал оказывать влияние на свойство value.


<input type="text" value="изменить текст, нажать кнопку"/><button type="button" onclick="this.previousSibling.removeAttribute('value'); this.previousSibling.value=''">очистить поле</button>

Проблем с кнопкой нет, она всегда срабатывает, так как свойство value и атрибут value удаляются одновременно
в f t
наверх ↑

2 комментария:

Сергей Ожерельев
Спасибо за статью. Пригодилось в качестве справки
NMitra
Благодарю за комментарий, Сергей