Что то не так со значением атрибута href

Атрибуты и свойства

Когда браузер загружает страницу, он «читает» (также говорят: «парсит») HTML и генерирует из него DOM-объекты. Для узлов-элементов большинство стандартных HTML-атрибутов автоматически становятся свойствами DOM-объектов.

Например, для такого тега у DOM-объекта будет такое свойство body.id=»page» .

Но преобразование атрибута в свойство происходит не один-в-один! В этой главе мы уделим внимание различию этих двух понятий, чтобы посмотреть, как работать с ними, когда они одинаковые и когда разные.

DOM-свойства

Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.

DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.

Например, создадим новое свойство для document.body :

document.body.myData = < name: 'Caesar', title: 'Imperator' >; alert(document.body.myData.title); // Imperator

Мы можем добавить и метод:

document.body.sayTagName = function() < alert(this.tagName); >; document.body.sayTagName(); // BODY (значением "this" в этом методе будет document.body)

Также можно изменять встроенные прототипы, такие как Element.prototype и добавлять новые методы ко всем элементам:

Element.prototype.sayHi = function() < alert(`Hello, I'm $`); >; document.documentElement.sayHi(); // Hello, I'm HTML document.body.sayHi(); // Hello, I'm BODY

Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:

Им можно присвоить любое значение.
Они регистрозависимы (нужно писать elem.nodeType , не elem.NoDeTyPe ).

HTML-атрибуты

В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.

Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит, если атрибут нестандартный.

Пожалуйста, учтите, что стандартный атрибут для одного тега может быть нестандартным для другого. Например, атрибут «type» является стандартным для элемента (HTMLInputElement), но не является стандартным для (HTMLBodyElement). Стандартные атрибуты описаны в спецификации для соответствующего класса элемента.

Мы можем увидеть это на примере ниже:

Таким образом, для нестандартных атрибутов не будет соответствующих DOM-свойств. Есть ли способ получить такие атрибуты?

Конечно. Все атрибуты доступны с помощью следующих методов:

elem.hasAttribute(name) – проверяет наличие атрибута.
elem.getAttribute(name) – получает значение атрибута.
elem.setAttribute(name, value) – устанавливает значение атрибута.
elem.removeAttribute(name) – удаляет атрибут.

Эти методы работают именно с тем, что написано в HTML.

Кроме этого, получить все атрибуты элемента можно с помощью свойства elem.attributes : коллекция объектов, которая принадлежит ко встроенному классу Attr со свойствами name и value .

Вот демонстрация чтения нестандартного свойства:

У HTML-атрибутов есть следующие особенности:

Их имена регистронезависимы ( id то же самое, что и ID ).
Их значения всегда являются строками.

Расширенная демонстрация работы с атрибутами:

Пожалуйста, обратите внимание:

getAttribute(‘About’) – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы.
Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение «123» .
Все атрибуты, в том числе те, которые мы установили, видны в outerHTML .
Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value .

Синхронизация между атрибутами и свойствами

Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).

В примере ниже id модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону:

Но есть и исключения, например, input.value синхронизируется только в одну сторону – атрибут → значение, но не в обратную:

Изменение атрибута value обновило свойство.
Но изменение свойства не повлияло на атрибут.

Иногда эта «особенность» может пригодиться, потому что действия пользователя могут приводить к изменениям value , и если после этого мы захотим восстановить «оригинальное» значение из HTML, оно будет в атрибуте.

DOM-свойства типизированы

DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип:

 checkbox

Есть и другие примеры. Атрибут style – строка, но свойство style является объектом:

Hello

Хотя большинство свойств, всё же, строки.

При этом некоторые из них, хоть и строки, могут отличаться от атрибутов. Например, DOM-свойство href всегда содержит полный URL, даже если атрибут содержит относительный URL или просто #hash .

link

Если же нужно значение href или любого другого атрибута в точности, как оно записано в HTML, можно воспользоваться getAttribute .

Нестандартные атрибуты, dataset

При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Давайте посмотрим, полезны они или нет, и для чего они нужны.

Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.

Также они могут быть использованы, чтобы стилизовать элементы.

Например, здесь для состояния заказа используется атрибут order-state :

 /* стили зависят от пользовательского атрибута "order-state" */ .order[order-state="new"] < color: green; >.order[order-state="pending"] < color: blue; >.order[order-state="canceled"] A new order.
 A pending order.
 A canceled order.

Почему атрибут может быть предпочтительнее таких классов, как .order-state-new , .order-state-pending , order-state-canceled ?

Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто:

// немного проще, чем удаление старого/добавление нового класса div.setAttribute('order-state', 'canceled');

Но с пользовательскими атрибутами могут возникнуть проблемы. Что если мы используем нестандартный атрибут для наших целей, а позже он появится в стандарте и будет выполнять какую-то функцию? Язык HTML живой, он растёт, появляется больше атрибутов, чтобы удовлетворить потребности разработчиков. В этом случае могут возникнуть неожиданные эффекты.

Чтобы избежать конфликтов, существуют атрибуты вида data-*.

Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset .

Например, если у elem есть атрибут «data-about» , то обратиться к нему можно как elem.dataset.about .

Атрибуты, состоящие из нескольких слов, к примеру data-order-state , становятся свойствами, записанными с помощью верблюжьей нотации: dataset.orderState .

Вот переписанный пример «состояния заказа»:

 .order[data-order-state="new"] < color: green; >.order[data-order-state="pending"] < color: blue; >.order[data-order-state="canceled"] A new order.

Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.

Пожалуйста, примите во внимание, что мы можем не только читать, но и изменять data-атрибуты. Тогда CSS обновит представление соответствующим образом: в примере выше последняя строка (*) меняет цвет на синий.

Итого

Атрибуты – это то, что написано в HTML.
Свойства – это то, что находится в DOM-объектах.

Свойства	Атрибуты
Тип	Любое значение, стандартные свойства имеют типы, описанные в спецификации	Строка
Имя	Имя регистрозависимо	Имя регистронезависимо

Методы для работы с атрибутами:

elem.hasAttribute(name) – проверить на наличие.
elem.getAttribute(name) – получить значение.
elem.setAttribute(name, value) – установить значение.
elem.removeAttribute(name) – удалить атрибут.
elem.attributes – это коллекция всех атрибутов.

В большинстве ситуаций предпочтительнее использовать DOM-свойства. Нужно использовать атрибуты только тогда, когда DOM-свойства не подходят, когда нужны именно атрибуты, например:

Нужен нестандартный атрибут. Но если он начинается с data- , тогда нужно использовать dataset .
Мы хотим получить именно то значение, которое написано в HTML. Значение DOM-свойства может быть другим, например, свойство href – всегда полный URL, а нам может понадобиться получить «оригинальное» значение.

Задачи

Получите атрибут

важность: 5

Напишите код для выбора элемента с атрибутом data-widget-name из документа и прочитайте его значение.

   Choose the genre

Селекторы атрибута

Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определёнными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.

Необходимые условия:	Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Задача:	Узнать, что такое селекторы атрибута и как их использовать.

Селекторы наличия и значения

Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например, href ) или на всевозможных разного рода сочетаниях со значением атрибута.

Селектор	Пример	Описание
[attr]	a[title]	Выбирает элементы с атрибутом attr (имя которого — это значение в квадратных скобках).
[attr=value]	a[href=»https://example.com»]	Выбирает элементы с атрибутом attr, значение которого в точности равно value — строке внутри кавычек.
[attr~=value]	p[class~=»special»]	Выбирает элементы с атрибутом attr, значение которого в точности равно value или содержит value в своём (разделённом пробелами) списке значений.
[attr\|=value]	div[lang\|=»zh»]	Выбирает элементы с атрибутом attr, значение которого в точности равно value или начинается с value, за которым сразу следует дефис.

В приведённом ниже примере вы можете увидеть использование этих селекторов.

Используя li[class], мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.
li[class=»a»] выбирает селектор с классом a , но не селектор с классом a в сочетании с другим, отделённым запятой, классом как частью значения. Он выбирает второй пункт списка.
li[class~=»a»] выберет класс a , а также значение, которое содержит класс a как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.

Селекторы вхождения подстроки

Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со строки «box-«, вы можете использовать [class^=»box-«] , чтобы выбрать оба класса (или [class|=»box»] как описано в предыдущем разделе).

Селектор	Пример	Описание
[attr^=value]	li[class^=»box-«]	Выбирает элементы с атрибутом attr (его имя — это значение в квадратных скобках), значение которого начинается с value.
[attr$=value]	li[class$=»-box»]	Выбирает элементы с атрибутом attr, значение которого заканчивается на value.
[attr*= ]	li[class*=»box»]	Выбирает элементы с атрибутом attr, значение которого содержит value, независимо от его положения внутри строки.

(Отступление: возможно, будет полезным заметить, что ^ и $ давно используются как якоря в так называемых регулярных выражениях и обозначают начинается с и заканчивается на.)

Следующий пример показывает, как используются эти селекторы:

li[class^=»a»] выбирает все значения атрибута, которые начинаются с a , что соответствует первым двум элементам списка.
li[class$=»a»] выбирает все значения атрибута, которые заканчиваются на a , что соответствует первому и третьему элементу списка.
li[class*=»a»] выбирает все значения атрибута, где появляется a , независимо от положения в строке, что соответствует всем элементам нашего списка.

Чувствительность к регистру

Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.

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

Примечание: Существует также более новое значение s , которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.

Следующие шаги

Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о псевдоклассах и псевдоэлементах.

В этом модуле

Каскад и наследование
Селекторы CSS
- Селекторы типа, класса и ID
- Селекторы атрибута
- Псевдоклассы и псевдоэлементы
- Комбинаторы
Модель коробки (The box model)
Фон и границы
Обработка разных направлений текста
Переполнение содержимого
Значения и единицы измерения
Изменение размеров в CSS
Элементы изображений, форм и медиа-элементы
Стилизация таблиц
Отладка CSS
Организация вашей CSS (en-US)

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Смена атрибута href при смене src у картинки при помощи jquery

Значение атрибута src у картинки меняется. Как можно сделать так, чтобы значение атрибута href (у ссылки) было равно значению атрибута src (у картинки) при помощи jquery? Пробовала такой вариант:

$("a.lightzoom").each(function() < this.href = $('img', this).attr('src'); >);

Работает, но только при загрузке страницы, а мне надо, чтобы срабатывало вместе со сменой значения src

Отслеживать
задан 18 апр 2018 в 14:47
Галина Высоцкая Галина Высоцкая
21 1 1 золотой знак 1 1 серебряный знак 2 2 бронзовых знака

а значение src у img каким образом меняется? Если при помощи скрипта, то дополните вопрос кодом изменения данного атрибута

18 апр 2018 в 14:54

Дело в том, что я пользуюсь шаблоном, в котором весь js в одну строчку написан :), поэтому не могу «выдрать» нужную часть кода.

18 апр 2018 в 15:33

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Сделайте по другому: повесьте обработчик на ссылку, и при клике на ссылку проверяйте значение src у тега img и затем делайте переход.

$("a.lightzoom").on("click", function() < location.href = $(this).find('img.gallery-main-image').attr('src'); return false; >);

Отслеживать
ответ дан 18 апр 2018 в 15:44
502 2 2 серебряных знака 9 9 бронзовых знаков

Два замечания: 1. зачем return false; ? 2. location.href = $(this).find(‘img.gallery-main-image’).attr(‘src’);

– user176262
18 апр 2018 в 15:51

Вариантов много может быть, я предложил идею. Потому что, как сейчас поставлена задача, реализовать будет проблематично

18 апр 2018 в 15:55

Спасибо, идея хорошая. Но есть еще одна проблема :). При клике на картинку — она должна появляться в popup. Т.е. значение href как раз и нужно для этого popup’а

18 апр 2018 в 16:05
@ГалинаВысоцкая — это не имеет отношения к вопросу выше. Задайте, пожалуйста, другой вопрос.
– user176262
18 апр 2018 в 16:06
@Александр Вы оказались правы с return false; .
– user176262
18 апр 2018 в 16:07

Всем большое спасибо. Я не в том месте искала проблему. Мне главное было, чтобы в popup показывалась та же картинка, что и в превью (это картинка, описанная в моем вопросе с классом gallery-main-image). А значения для popup брались из href ссылки с классом lightzoom. Короче, поменяла для popup href на src картинки с классом gallery-main-image — всё работает как надо. Предложенный вариант Александром рабочий, но к моему попапу был не применим. Так как из-за того, что значение в href менялось после клика, показывалась предыдущая картинка. Извините за некорректный вопрос

Отслеживать
ответ дан 18 апр 2018 в 16:45
Галина Высоцкая Галина Высоцкая
21 1 1 золотой знак 1 1 серебряный знак 2 2 бронзовых знака

jquery
ссылки
атрибуты

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Атрибут href

Задает адрес документа, на который следует перейти. Поскольку в качестве адреса ссылки может использоваться документ любого типа, то результат перехода по ссылке зависит от конечного файла. Так, архивы (файлы с расширением zip или rar) будут сохраняться на локальный диск. По умолчанию новый документ загружается в текущее окно браузера, однако это свойство можно изменить с помощью атрибута target .

Синтаксис

Обязательный атрибут

Обязателен для ссылок.

Значения

В качестве значения принимается полный или относительный путь к файлу.

Значение по умолчанию

HTML5 IE Cr Op Sa Fx

    Тег А, атрибут href  Относительная ссылка
 Абсолютная ссылка

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.