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

Question

Assuming that the html contains the following structure:

    text


         


        

Answer 1

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...).

Answer 2

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

Answer 3

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>

Answer 4

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

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