Question

Are you allowed to set the ID of an HTML element dynamically – i.e. as a simple example, can i do:

<a href="#" id="onOrOff()">Jazz</a>

And:

function onOrOff()
{
 document.write("someIDSetInMyCSSFile");    
}

I’ve tried it and it doesnt work so just want to check whether or not I’m missing some other point.

Thanks.

Answer 1

Update: Created a jsFiddle for this solution: http://jsfiddle.net/SdvA2/3/ Feel free to experiment!

Assuming that your CSS refers to #coolLink (and/or #uncoolLink)you could try something like this:

<a href="#" id="uncoolLink" onclick="makeCool()">Jazz</a>

To turn on coolLink id formatting dynamically you can try using these functions:

<script>
function makeCool() {
  var element = document.getElementById("uncoolLink");
  element.id ="coolLink";
}
</script>

See more here: https://developer.mozilla.org/en-US/docs/DOM/document.getElementById

However, I would strongly recommend keeping the id constant and simply changing the class (and adjusting your css accordingly).

Going one step further, I would recommend using jQuery as this will open up a world of possibility, change the way you approach things, make life so much easier and protect you from browser incompatibilities.