Javascript: replace a string in element.src attribute

Question

up vote 2 down vote favorite

Hi I am currently trying to replace a query string value in a a link's src attribute.

it works fine in firefox but not in ie.

example:

<a id="link" href="#" src="http://somedomain.com?id=123&size=20">link</a>

then on my js it looks kinda like this:

var link = document.getElementById('link');
link.src.replace('size=20', 'size=45');

in ie, it returns something like src is not an object error;

anyone kind enough to lend a hand?

also, i need this to be on native javascript so please don't suggest a framework as a solution thanks.

edited Jul 23 '09 at 15:14

Jonathan Fingland
9,0691922

asked Jul 23 '09 at 15:13

user143805
163

0% accept rate

You might also want is use the Regex with replace, w3schools.com/jsref/jsref_replace.asp – BigBlondeViking Jul 23 '09 at 15:19

chaos · Answer 1 · 2009-07-23 15:14:55Z

up vote 1 down vote

To get it to work in IE you're going to need to use link.setAttribute('src', ...).

answered Jul 23 '09 at 15:14

chaos
37.9k471117

CMS · Answer 2 · 2009-07-23 15:18:48Z

up vote 1 down vote

Well, links (anchor elements) don't have a src attribute, I think that you want to change the href attribute:

var link = document.getElementById('link');
link.href = link.href.replace('size=20', 'size=45');

answered Jul 23 '09 at 15:18

CMS
88.4k6100177

	Good point. Though he could be using src as a custom attribute, in which case setAttribute and getAttribute come back into play. – Joel Potter Jul 23 '09 at 15:23
	well yeah sorry bout that, i used a wrong example (im really fussed lol)... in my real case, its an img tag... im trying to display gravatar images... on preview i use smaller thumbnails hence the s=18 query string. but on click, i want to replace the s=18 with s=45 and place the result on a textbox. – user143805 Jul 23 '09 at 15:31

Joel Potter · Answer 3 · 2009-07-23 15:15:57Z

I believe getAttribute is more cross-browser friendly.

var link = document.getElementById('link');
var result = link.getAttribute("src").replace('size=20', 'size=45');

Also, the replace function returns a string. It doesn't operate on the string it is called against. This means you have to assign the result.

link.setAttribute("src", result);

Jonathan Fingland · Answer 4 · 2009-07-23 15:17:01Z

up vote 0 down vote

use:

var link = document.getElementById('link');
var src = link.getAttribute("src").replace('size=20', 'size=45');
link.setAttribute("src", src);

answered Jul 23 '09 at 15:17

Jonathan Fingland
9,0691922

coderjoe · Answer 5 · 2009-07-23 18:06:47Z

In your case the "src" attribute in your link is an expando attribute, since an anchor tag does not have a src.

When working with expando attributes, it's safest to set and get the values using the setAttribute('attributeName',value) and getAttribute('attributeName') accessors.

To find out more about getAttribute and setAttribute you can check here:

To find out more about DHTML properties you can check the MSDN Resource here:

http://msdn.microsoft.com/en-us/library/ms533055%28VS.85%29.aspx

Example Code using getAttribute and setAttribute:

var link = document.getElementById('link');
var src = link.getAttribute('src');
link.setAttribute('src',src.replace('size=20','size=40'));

Javascript: replace a string in element.src attribute

5 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript internet-explorer replace or ask your own question.

Hello World!

Javascript: replace a string in element.src attribute

5 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript internet-explorer replace or ask your own question.

Hello World!

Related