Як я можу динамічно додати атрибут “href” до посилання за допомогою JavaScript?

95

Як я можу hrefдинамічно додати атрибут до посилання за допомогою JavaScript?

В основному я хочу динамічно додати hrefатрибут <a></a>(тобто, коли користувач натискає певне зображення на веб-сайті).

От з:

<a>Link</a>

Мені потрібно перейти до:

<a href="somelink url">Link</a>

javascript html

— Павло
джерело

165

var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"

— stecb
джерело

Цікаво. Я не знав, що ви можете отримати безпосередній доступ до атрибутів як полів (порівняйте з моїм рішенням нижче, використовуючи setAttribute). Хтось знає, чи стандартний такий підхід?

— mgiuca

Я думаю, що для елемента DOM href - це атрибут, який ви можете встановити безпосередньо el.href. Натомість setAttribute (el, attr) використовується для додавання деяких користувацьких атрибутів до певного елемента DOM, тому в цьому випадку немає необхідності використовувати його для встановлення std. attr

— stecb

Але чи правильні обидва шляхи ? Не намагаючись критикувати відповідь - вона цілком може бути правильною. Але в Інтернеті недостатньо отримати щось, що вам підходить. Він повинен працювати у всіх браузерах, а це означає, що потрібно дотримуватися стандартів. FWIW, це працює і для мене (у Firefox), але мені цікаво дізнатись, чи насправді це стандартний спосіб це зробити. Специфікація W3C DOM ( w3.org/TR/DOM-Level-2-Core/core.html ), схоже, не згадує про це.

— mgiuca

6

Це інтерфейси для легшої взаємодії з елементами. Наприклад, усі посилання мають методи, визначені в HTMLLinkElementяких підтримується встановлення певних полів, таких як href. Ви повинні заглянути в посилання, щоб побачити, який із них можна використовувати без необхідності setAttribute. Іншим прикладом є <table>елемент ( HTMLTableElement ), де ви можете використовувати insertRow()для вставки нових рядків без необхідності створювати <tr>та додавати його до таблиці.

— Тайська,

3

@mgiuca: Як правило, для HTML DOM, вам слід віддавати перевагу використанню властивостей, а не setAttribute()і getAttribute(), які порушені в IE, і не завжди роблять те, що можна було очікувати. Дивіться stackoverflow.com/questions/4456231/…

— Тім Даун

25

Я припускаю, що ви знаєте, як отримати об'єкт DOM для <a>елемента (використання document.getElementByIdабо якийсь інший метод).

Щоб додати будь-який атрибут, просто використовуйте метод setAttribute в об'єкті DOM:

a = document.getElementById(...);
a.setAttribute("href", "somelink url");

— mgiuca
джерело

pal, setattribute є досить нестандартним для модифікації атрибутів. Щоб отримати доступ або змінити поточні значення, слід використовувати властивості. Наприклад, використовуйте elt.value замість elt.setAttribute ('value', val). developer.mozilla.org/en/DOM/element.setAttribute#Notes

— naveen

@naveen У ньому сказано "найбільш помітно в XUL", що, мабуть, не те, що це таке. Я не впевнений, до яких інших значень посилається ("певні атрибути" дуже розпливчастий), але setAttributeявно є стандартом ( w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082 ), і W3C не визначає жодних атрибутів, для яких він не працює. І навпаки, я можу гарантувати, що використання властивості не вдасться для певних імен атрибутів. Такі як tagName, та setAttribute- це вже поля / методи інтерфейсу Element. Я не бачу ніде в документі W3C, де згадуються властивості атрибутів.

— mgiuca

@mgiuca: Здається, ти знайшов відповідну специфікацію після розміщення останнього коментаря. Я не розумію вашої думки про те, що властивості не працюють, а потім згадуються tagName. Ви говорите про власні атрибути?

— Тім Даун

Я маю на увазі, що DOM (навіть реалізований у браузері) - це загальна специфікація для роботи з деревами XML загалом, а не лише HTML. При роботі з довільними елементами XML єдиним способом надійного отримання та встановлення атрибутів є getAttributeand setAttribute; "tagName"є прикладом атрибута, який не може працювати як властивість. Тільки під час роботи з HTML та для певних атрибутів, визначених у специфікації DOM HTML, ви можете використовувати властивості для читання та призначення атрибутів.

— mgiuca

Я, мабуть, нерозумію, але це все одно бентежить. tagName є властивістю Elementоб'єктів у JavaScript як у HTML, так і в XML DOM, і ви не можете отримати ім'я тегу елемента через getAttribute("tagName")(за винятком IE, реалізація якого getAttribute()і setAttribute()порушена), що здається абсолютно протилежним тому, що ви говорите.

— Тім Даун

3

Спочатку спробуйте змінити <a>Link</a>на <span id=test><a>Link</a></span>.

Потім додайте щось на зразок цього у функцію javascript, яку ви викликаєте:

var abc = 'somelink';
document.getElementById('test').innerHTML = '<a href="' + abc + '">Link</a>';

Таким чином посилання буде виглядати так:

<a href="somelink">Link</a>

— Рахул Судха
джерело

Привіт. Ласкаво просимо до Stackoverflow. Здається, питання OP стосується того, як додати тег hrefдо існуючого a тегу ( я в основному хочу динамічно додати атрибут href до <a> </a> ). Тим НЕ менше, ця відповідь , здається, пояснити , як створити в aтег з href.

— Moishe Lipsker

1

document.getElementById('link-id').href = "new-href";

Я знаю, що це стара публікація, але ось однокласник, який, можливо, більше підходить для деяких людей.

— noɥʇʎԀʎzɐɹƆ
джерело