Javascript примеры с атрибутами

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге.

JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно.

Получение значения атрибута элемента

Метод getAttribute() используется для получения текущего значения атрибута элемента.

Если указанный атрибут не существует в элементе, он вернет null . Вот пример:

Google  

JavaScript предоставляет несколько различных способов выбора элементов на странице. Подробнее см. Руководство по селекторам DOM в JavaScript.

Установка атрибутов для элементов

Метод setAttribute() используется для установки атрибута для указанного элемента.

Если атрибут уже существует в элементе, значение обновляется; в противном случае добавляется новый атрибут с указанным именем и значением. Код JavaScript в следующем примере добавит class и disabled атрибут к элементу .

Click Me  

Аналогично, вы можете использовать метод setAttribute() для обновления или изменения значения существующего атрибута в элементе HTML. Код JavaScript в следующем примере обновит значение существующего атрибута href элемента .

Ссылка  

Удаление атрибутов из элементов

Метод removeAttribute() используется для удаления атрибута из указанного элемента.

Код JavaScript в следующем примере удалит атрибут href из элемента .

Google  

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по функциям в JavaScript

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

Разработка сайтов для бизнеса

Если у вас есть вопрос, на который вы не знаете ответ — напишите нам, мы поможем разобраться. Мы всегда рады интересным знакомствам и новым проектам.

Источник

Работа с атрибутами элементов в JavaScript

В JavaScript существует набор методов для изменения, создания, удаления и проверки существования атрибутов HTML тегов.

• getAttribute(‘X’) — возвращает значение атрибута с названием ‘X’
• setAttribute(‘X’, ‘Y’) — устанавливает значение атрибута с названием ‘X’ в значение ‘Y’
• removeAttribute(‘X’) — удаляет атрибут ‘X’
• hasAttribute(‘X’) — проверяет наличие атрибута ‘X’

Кликни на меня!
 function MyFunc(a) 

Если загрузить страницу браузера с таким примером и кликнуть на «Кликни на меня!», то появится всплывающее окно:

В примере использован атрибут, название которого придумано самостоятельно. Но для таких случаев лучше создавать атрибуты с префиксом data-. К примеру, data-mouse.

Используем остальные методы. Попробуем установить значение атрибута «mouse» в «Сыр!» с помощью setAttribute. Для этого напишем следующий код:

Кликни на меня!
 function MyFunc(a) 

В этом примере мы сначала установили значение атрибута «mouse» в «Сыр!», а затем прочитали его. В итоге получилось всплывающее окно с текстом «Сыр!»: Немного модифицируем предыдущий пример, чтобы продемонстрировать работу removeAttribute на удалении атрибута «mouse».

Кликни на меня!
 function MyFunc(a) 

Очевидно, что если атрибут будет удалён, то функция getAttribute не сможет ничего вернуть (точнее вернёт отсутствие значение — «null»): Осталось продемонстрировать последний метод hasAttribute, который служит для проверки существования атрибута. Этот метод возвращает логические «true» («правда») или «false» («ложь»). Составим пример, который будет наглядно показывать разницу

Кликни на меня!
  

При выполнении такого кода мы увидим всплывающее окно с текстом «Атрибут mouse существует!»: Но всплывающего окна с текстом «Атрибут cat существует!» не будет, потому что такого атрибута у элемента нет.

Источник