how can the value of an href attribute be changed using javascript/css?

Question

Assuming that the html contains the following structure:

<div>
    <a href="http://the/link/that/needs/to/be/changed">text</a>
</div>

<div>
    <div>
        //<script> or <style> must go here
    </div>
</div>

...and assuming that the 'contribution' to the final HTML file can be inserted ONLY at the specified location, and assuming that the markup for the "a" element cannot be modified in any way, is it possible to add javascript or css code that will change the url that the href attribute of the previous "a" element refers to? If so, how?

See http://stackoverflow.com/questions/179713/how-to-change-the-href-for-a-hyperlink-using-jquery — ForOhFor, Jun 17 '13 at 19:21
If you want to get the previous `a` element and cannot change the HTML, this should do: `var elements = document.getElementsByTagName('a'); var last = elements[elements.length - 1];`. — Felix Kling, Jun 17 '13 at 19:22

score 3 · Accepted Answer · answered Jun 17 '13 at 19:26

3

You could do it without id:

document.querySelector("a[href^='http://the']")

and set the href prop:

document.querySelector("a[href^='http://the']").href=whatever

For a full reference (browser-compatibility) of querySelector see the MDN-Article

answered Jun 17 '13 at 19:26

Thomas Junk

5,588
2
30
43

score 2 · Answer 2 · answered Jun 17 '13 at 19:21

2

Put an id on it, e.g.

<a id="the_a_tag" href="...">...</a>
   ^^^^^^^^^^^^^^

then the JS is simply

document.getElementById('the_a_tag').href = 'new address goes here';

as long as you put the javascript AFTER the relevant HTML.

And note: CSS is for presentation only. With a few exceptions, it cannot affect the content of document elements, merely how they appear (color/size/position/etc...).

answered Jun 17 '13 at 19:21

Marc B

356,200
43
426
500

I have no control over the id of the "a" element. – J Smith Jun 17 '13 at 20:18

score 1 · Answer 3 · answered Jun 17 '13 at 19:23

1

Give the link an id <a href='...' id='linkToChange'>text</a>

And then access it in your script: document.getElementById('linkToChange').href='newAddress';

answered Jun 17 '13 at 19:23

ForOhFor

786
10
16

I have no control over the id of the "a" element. – J Smith Jun 17 '13 at 20:19

score 0 · Answer 4 · answered Jun 17 '13 at 19:23

You can do this using something like this:

document.getElementById("abc").href="xyz.php";

You will need to set an ID for the tag, so your tag will look like this:

    <div>
    <a href="http://the/link/that/needs/to/be/changed">text</a>
</div>

<div>
    <div>
        //<script> or <style> must go here
    </div>
</div>

how can the value of an href attribute be changed using javascript/css?

4 Answers4

Linked

Related