用javascript替换多个html属性

Question

I need to make a function that replaces: addthis:url= addthis:title= and addthis:description= in these 3 elements:

<a class="addthis_button_facebook_like" fb:like:layout="button_count" 
addthis:url="http://example.com"
addthis:title="An Example Title"
addthis:description="An Example Description"></a>

<a class="addthis_button_tweet" 
addthis:url="http://example.com"
addthis:title="An Example Title"
addthis:description="An Example Description"></a>

<a class="addthis_button_google_plusone" g:plusone:size="medium"
addthis:url="http://example.com"
addthis:title="An Example Title"
addthis:description="An Example Description"
></a>

How do I do it? Eg: with the values newurl.com , newtitle and newdescription ?

Answer 1

If you give your elements an ID for easy access you can do something like this:

<a id="link1" class="addthis_button_facebook_like" fb:like:layout="button_count"  addthis:url="http://example.com" addthis:title="An Example Title" addthis:description="An Example Description"></a>

<script>
var el = document.getElementById("link1");
el.setAttribute("addthis:url", "new url");
el.setAttribute("addthis:title", "new title here");
el.setAttribute("addthis:description", "new description here");
</script>

I'll leave it to you to encapsulate that in a function as required.

Note: if you don't want to or can't give your elements an ID for some reason you could try document.getElementsByClassName() on your existing HTML, but IE didn't introduce support until IE9.