Come posso aggiungere dinamicamente l'attributo href a un collegamento utilizzando JavaScript?Come posso aggiungere l'attributo "href" a un collegamento in modo dinamico utilizzando JavaScript?
In pratica voglio aggiungere un attributo href a <a></a> in modo dinamico (ad esempio quando l'utente fa clic su un'immagine specifica nel sito Web).
Quindi da:
<a>Link</a>
ho bisogno di andare a:
<a href="somelink url">Link</a>
var a = document.getElementById('yourlinkId'); //or grab it by tagname etc
a.href = "somelink url"
presumo di sapere come ottenere l'oggetto DOM per l'elemento <a> (utilizzare document.getElementById o qualche altro metodo).
Per aggiungere qualsiasi attributo, basta usare il metodo setAttribute sull'oggetto DOM:
a = document.getElementById(...);
a.setAttribute("href", "somelink url");
pal, setattribute è piuttosto non standard per la modifica degli attributi. Per accedere o modificare i valori correnti, è necessario utilizzare le proprietà. Ad esempio, usa elt.value invece di elt.setAttribute ('value', val). https://developer.mozilla.org/en/DOM/element.setAttribute#Notes – naveen
@naveen Dice "in particolare in XUL", che presumibilmente non è ciò che è. Non sono sicuro di quali altri valori si riferisca a ("determinati attributi" è molto vago), ma "setAttribute" è chiaramente lo standard (http://www.w3.org/TR/DOM-Level-2-Core/ core.html # ID-F68F082) e W3C non definisce alcun attributo per il quale non funziona. Al contrario, posso garantire che l'utilizzo della proprietà fallirà per determinati nomi di attributi. Ad esempio 'tagName' e' setAttribute' - quelli sono già campi/metodi dell'interfaccia Element. Non vedo da nessuna parte nel documento del W3C che menzioni le proprietà per gli attributi. – mgiuca
@mgiuca: Sembra che tu abbia trovato le specifiche pertinenti dopo aver postato quell'ultimo commento. Non capisco il tuo punto di vista sul fallimento delle proprietà, e poi menziono 'tagName'. Stai parlando di attributi personalizzati? –
So che questo è stato già risposto, ma dal momento che questo post mi ha aiutato a raggiungere la mia soluzione, ho voluto pubblicare.
In origine, ho provato
<a href='somelink' class='button-css'>Click Me</a>
e questo quasi funzionato. Il testo era un po 'fuori centro e semplicemente non molto chiaro. Ho quindi provato:
"<a href='SomeLink'><input type='button' class='button-css' value='Button Text' /></a>"
Il mio pulsante sembra ottimo e il collegamento funziona.
So che questo è un vecchio post ma l'ho visto e mi ha infastidito, ovviamente non sta parlando di questo. – Bbit
document.getElementById('link-id').href = "new-href";
So che questo è un vecchio post, ma qui è una battuta che potrebbe essere più adatto per alcune persone.
Innanzitutto, provare a cambiare <a>Link</a> a <span id=test><a>Link</a></span>.
Poi, aggiungere qualcosa di simile nella funzione javascript che si sta chiamando:
var abc = 'somelink';
document.getElementById('test').innerHTML = '<a href="' + abc + '">Link</a>';
In questo modo il link sarà simile a questa:
<a href="somelink">Link</a>
Si prega di ignorare il simbolo "' "nel codice !! : D –
Interessante. Non sapevo che potresti accedere direttamente agli attributi come campi (confronta la mia soluzione qui sotto, usando 'setAttribute'). Qualcuno sa se questo approccio è standard? – mgiuca
Grazie a tutti - entrambi i modi funzionano. – Pavel
Penso che un elemento DOM href sia un attributo che puoi impostare direttamente da el.href. Invece, setAttribute (el, attr) viene utilizzato per aggiungere alcuni attributi personalizzati a un particolare elemento DOM, quindi in questo caso non è necessario usarlo per impostare uno std. attr – stecb