Атрибуты и свойства
»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.
Библиотека jQuery позволяет получать и устанавливать значения атрибутов элементов, содержащихся в объекте jQuery. Методы jQuery, предназначенные для работы с атрибутами, описаны в таблице ниже:
| Метод | Описание |
|---|---|
| attr(имя) | Возвращает значение атрибута с указанным именем для первого из элементов, содержащихся в объекте jQuery |
| attr(имя, значение) | Устанавливает значение атрибута с указанным именем для всех элементов, содержащихся в объекте jQuery |
| attr(объект отображения) | Устанавливает атрибуты, указанные в объекте отображения, для всех элементов, содержащихся в объекте jQuery |
| attr(имя, функция) | Устанавливает указанный атрибут для всех элементов, содержащихся в объекте jQuery, с помощью функции |
| removeAttr(имя), removeAttr(имя[]) | Удаляет атрибут (атрибуты) из всех элементов, содержащихся в объекте jQuery |
| prop(имя) | Возвращает значение указанного свойства для первого из элементов, содержащихся в объекте jQuery |
| prop(имя, значение), prop(объект отображения) | Устанавливает значение одного или нескольких свойств для всех элементов, содержащихся в объекте jQuery |
| prop(имя, функция) | Устанавливает значение указанного свойства для всех элементов, содержащихся в объекте jQuery, с использованием функции |
| removeProp(имя) | Удаляет указанное свойство из всех элементов, содержащихся в объекте jQuery |
Если метод attr() вызывается с одним аргументом, jQuery возвращает значение указанного атрибута для первого из элементов выбранного набора. Соответствующий пример приведен ниже:
$(function() < var srcValue = $('img').attr('src'); console.log("Значение атрибута: " + srcValue); >);В этом сценарии мы выбираем все элементы img в документе, а затем используем метод attr() для получения значения атрибута src, при считывании которого получаем строку. На консоль выводится следующий результат:
Получение значения атрибута для всех элементов, содержащихся в объекте jQuery, обеспечивается совместным применением методов each() и attr():
$(function() < var srcValue = $('img').each(function(index, element) < console.log('Значение атрибута src: ' + $(this).attr('src')); >); >);В этом сценарии из объекта HTMLElement, передаваемого функции в качестве аргумента, с помощью функции $() создается объект jQuery. Этот объект содержит единственный элемент, который идеально подходит для метода attr().
Установка значений атрибутов
Если метод attr() используется для установки значения атрибута, то изменение применяется ко всем элементам, содержащимся в объекте jQuery. Таким образом, в данном случае метод ведет себя иначе, чем при считывании атрибутов, когда возвращается лишь значение атрибута одного элемента. При установке атрибута метод attr() возвращает объект jQuery, что означает возможность использования цепочки вызовов.
Пример сценария, выполняющего установку значения атрибута, приведен ниже:
$(function() < $('img').attr("src", "http://professorweb.ru/downloads/jquery/lily.png"); >);В этом сценарии выбираются все элементы img в документе, и для атрибута src устанавливается ссылка на картинку lily.png. Установленное значение применяется ко всем выбранным элементам, как показано на рисунке:
Установка нескольких атрибутов
Можно установить значения нескольких атрибутов одним вызовом метода attr(), передав ему в качестве аргумента объект. Свойства такого объекта интерпретируются как имена атрибутов, а значения свойств — как значения атрибута. Этот объект принято называть . Соответствующий пример приведен ниже:
$(function() < var attrValues = < src: 'http://professorweb.ru/downloads/jquery/lily.png', style: 'border: thick solid red' >; $('img').attr(attrValues); >);В этом сценарии создается объект, определяющий свойства с именами src и style. Далее в документе выбираются элементы img, и методу attr() передается объект отображения. Вид страницы в окне браузера приведен на рисунке:
Динамическая установка значений атрибутов
Назначаемые атрибутам значения можно определять во время выполнения сценария, передавая методу attr() функцию в качестве аргумента. Соответствующий пример приведен ниже:
$(function() < $('img').attr("src", function(index, oldVal) < if (oldVal.indexOf("rose") >-1) < return "http://professorweb.ru/downloads/jquery/lily.png"; >else if ($(this).closest('#row2').length > 0) < return "http://professorweb.ru/downloads/jquery/carnation.png"; >>); >);Аргументы, передаваемые указанной функции, — это индекс обрабатываемого элемента в наборе и прежнее значение атрибута. Переменная this ссылается на текущий обрабатываемый объект HTMLElement. Если вы хотите изменить атрибут, то функция должна вернуть строку, содержащую новое значение. Если же результат не возвращается, то используется прежнее значение атрибута. В данном примере функция используется для избирательного изменения изображений, отображаемых элементами img.
Удаление атрибутов
Атрибуты можно удалять (отменять установку) с помощью метода removeAttr(), как показано в примере ниже:
$(function() < $('img').attr("style", "border: thick solid red"); $('img:odd').removeAttr("style"); >);В этом примере атрибут style сначала устанавливается с помощью метода attr(), а затем удаляется из нечетных элементов img с помощью метода removeAttr(). Вид страницы в окне браузера приведен на рисунке:
Работа со свойствами
Каждому варианту метода attr() соответствует аналогичный вариант вызова метода prop(). Различие между обоими методами состоит в том, что методы prop() имеют дело со свойствами, определяемыми объектами HTMLElement, а не со значениями атрибутов. Часто атрибуты и соответствующие свойства имеют одинаковые имена, но это не всегда так. В качестве простого примера можно привести атрибут class, представленный в объекте HTMLElement свойством className.
Пример использования метода prop() для получения значения этого свойства приведен ниже:
$(function() < $('*[class]').each(function(index, elem) < console.log("Элемент:" + elem.tagName + " " + $(elem).prop("className")); >); >);В этом примере сначала выбираются в виде набора, а затем последовательно перебираются с помощью метода each() все элементы, у которых имеется атрибут class. Для каждого элемента на консоль выводится его тип и значение свойства className.
Получить значение атрибута класса элемента :
Дополнительные примеры «Попробуй сам» приведены ниже.
Определение и использование
Метод getAttribute() возвращает значение атрибута с указанным именем элемента.
Совет: Используйте метод getAttributeNode(), если вы хотите вернуть атрибут как объект Attr.
Поддержка браузера
| Метод | |||||
|---|---|---|---|---|---|
| getAttribute() | Да | Да | Да | Да | Да |
Синтаксис
element.getAttribute(attributename)
Параметр значений
| Параметр | Тип | Описание |
|---|---|---|
| attributename | String | Требуемый. Имя атрибута, из которого вы хотите получить значение |
Технические детали
Ещё примеры
Пример
Получить значение целевого атрибута элемента :
var x = document.getElementById(«myAnchor»).getAttribute(«target»);
Пример
Получить значение атрибута Событие onclick элемента :
var x = document.getElementById(«myBtn»).getAttribute(«onclick»);
Связанные страницы
Упражнения
КАК СДЕЛАТЬ
ПОДЕЛИТЬСЯ
СЕРТИФИКАТЫ
Сообщить об ошибке
Если вы хотите сообщить об ошибке или сделать предложение, не стесняйтесь, присылайте нам электронное письмо:
Ваше предложение:
Спасибо, за вашу помощь!
Ваше сообщение было отправлено в SchoolsW3.
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
SchoolsW3 оптимизирован для обучения, тестирования и тренировки. Примеры упрощают и улучшают чтение и базовое понимание.Учебники, справочники, примеры постоянно пересматриваются, для того, чтобы избежать ошибки, невозможно гарантировать правильность всего содержимого.Используя данный сайт, вы соглашаетесь прочитать и принять условия использования, cookie и Политика конфиденциальности.Авторское право 1999 — 2022 Все права защищены.
Работает на W3.CSS.
XPath Navigator. Get Attribute(String, String) Метод
Некоторые сведения относятся к предварительной версии продукта, в которую до выпуска могут быть внесены существенные изменения. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.
Возвращает значение атрибута с указанным локальным именем и универсальным кодом ресурса (URI) пространства имен.
public: virtual System::String ^ GetAttribute(System::String ^ localName, System::String ^ namespaceURI);public: abstract System::String ^ GetAttribute(System::String ^ localName, System::String ^ namespaceURI);public virtual string GetAttribute (string localName, string namespaceURI);public abstract string GetAttribute (string localName, string namespaceURI);abstract member GetAttribute : string * string -> string override this.GetAttribute : string * string -> stringabstract member GetAttribute : string * string -> stringPublic Overridable Function GetAttribute (localName As String, namespaceURI As String) As StringPublic MustOverride Function GetAttribute (localName As String, namespaceURI As String) As StringПараметры
Локальное имя атрибута. localName учитывает регистр.
namespaceURI String
Универсальный код ресурса (URI) пространства имен атрибута.
Возвращаемое значение
String, содержащая значение указанного атрибута; Empty, если совпадающий атрибут не найден, или если XPathNavigator не расположен на узле элемента.
Комментарии
Перед XPathNavigator вызовом GetAttribute метода необходимо разместить на узле элемента.
Этот метод не влияет на состояние XPathNavigator.
Применяется к
См. также раздел
- MoveToAttribute(String, String)
- MoveToFirstAttribute()
- MoveToNextAttribute()
- HasAttributes
JavaScript метод Element.getAttribute()
JavaScript метод getAttribute() объекта Element возвращает значение указанного атрибута элемента. Если данный атрибут не существует у указанного элемента, то возвращаемое значение будет соответствовать значению null .
Обращаю Ваше внимание на то, что объекты, представляющие HTML элементы определяют JavaScript свойства, соответствующие стандартным HTML атрибутам, по этой причине этот метод будет более актуален для обращения к нестандартным атрибутам.
В XML документах значения атрибутов недоступны непосредственно как свойства элемента, по этой причине необходимо использовать метод getAttribute() для доступа к ним. Для XML документов, в которых используются пространства имен необходимо использовать метод getAttributeNS() (в таких документах в имя атрибута включается префикс пространства имен и двоеточие).
Использование метода getAttribute() вместе с методом getAttributeNames(), который возвращает имена всех атрибутов элемента в виде массива строк, является эффективным с точки зрения производительности и служит альтернативой свойству Element .attributes.
Поддержка браузерами
| Метод | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| getAttribute() | Да | Да | Да | Да | Да | Да |
JavaScript синтаксис:
const attributeVal = element.getAttribute( attributeName ); attributeName - String
Версия JavaScript
Document Object Model (DOM) Level 1 Core
Значения параметров
| Параметр | Описание |
|---|---|
| attributeName | Имя атрибута, значение которого вы хотите получить. Обязательный параметр. |
Пример использования
Использование методов hasAttribute(), getAttribute() и setAttribute() onclick = "checkAttr()">Click medata-val =
"1">function checkAttr() const p = document.querySelector("p"), // выбираем первый элементв документе
attr nam">data-val"; // инициализируем переменную строковым значением if ( p.hasAttribute(attr) ) // проверяем имеется ли у элемента атрибут со значением, содержащимся в переменной attr const attrVal = p.getAttribute(attr); // получаем значение этого атрибута p.innerHTML = attrVal; // добавляем элементуновое содержимое (значение атрибута data-val )
const newAttrVal = Number(attrVal) + 1; // инициализируем переменную, которая увеличивает значение атрибута data-val на 1 p.setAttribute(attr, newAttrVal); // устанавливаем новое значение для атрибута data-val > >
В этом примере с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент ) вызываем функцию, которая:
- Инициализирует две переменные, первая переменная содержит первый элемент в документе, а вторая строковое значение (одноименное с атрибутом элемента ).
- С помощью метода hasAttribute() проверяем имеется ли у элемента атрибут со значением, содержащимся в переменной attr.
- С помощью метода getAttribute() получаем значение этого атрибута и с помощью свойства innerHTML добавляем элементу новое содержимое (значение атрибута data-val).
- После этого инициализируем переменную, которая увеличивает значение атрибута data-val на 1, и с помощью метода setAttribute() устанавливаем новое значение для атрибута data-val элементу . Обратите внимание, что перед увеличением на единицу мы приводим строковое значение, содержащееся в переменной к числу, используя конструктор Number() .
Результат нашего примера:
В следующем примере мы рассмотрим совместное использование методов getAttributeNames() и getAttribute():
Использование JavaScript метода .getAttributeNames() и getAttribute() onclick = "myFunc()" class = "myButton" name = "active-button" value = "100" data-val = "123">Нажми меняclass = "info">function myFunc() const btn = document.querySelector("button"), // находим первый элемент в документе info = document.querySelector(".info"); // находим первый элемент с классом info let attributeNames = btn.getAttributeNames(); // возвращаем имена всех атрибутов элемента в виде массива строк for( let name of attributeNames) // проходим циклом по всем элементам массива let val = btn.getAttribute(name); // получаем значение указанного атрибута элемента info.innerHTML += "Имя атрибута: " + name + " . Значение атрибута: " + val + "
"; // добавляем новое содержимое элементу > >
Результат нашего примера:
JavaScript Element
© 2016-2024 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com
Кажется, вы используете блокировщик рекламы 🙁
Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.
Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.