Help IE Bug getNamedItem("width")

[hroyale]

Hi,
I'm working on a bit of JavaScript that will read the source and other information from an img tag for some CSS manipulation.

So basically I'm using getElementById with a workaround for the IE failings with that method.
var myImage = document.getElementById("myLogo");

Then I grab the attributes by name with:
var imageattributes=myImage.attributes;
var imgURL = imageattributes.getNamedItem("src").value;
var imgHeight = imageattributes.getNamedItem("height");
var imgWidth = imageattributes.getNamedItem("width");
var imgAlt = imageattributes.getNamedItem("alt");

It all works great in IE8 and FireFox.

The alt and src work great in everything.

However IE 6 and 7 (and compatibility view IE8) always return "0" as the value for height and width even when another value is set. They return "0" when the tags aren't included at all.

I did a google search but I couldn't find anything about this specific IE bug, assuming it's a bug and not something I'm overlooking.

Anyone have any tips or similar experiences?

Thanks,
Heather

[Philip M]

var imgHeight = imageattributes.getNamedItem("height").value;
var imgWidth = imageattributes.getNamedItem("width").value;
var imgAlt = imageattributes.getNamedItem("alt").value;

Fine in IE6/7 but does not work in Firefox. So you will need a bit of browser detection and alternative code.


All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

[hroyale]

Thanks. Sorry, that was a typo in my posting. I'm using .value in all instances.

The odd thing is that the alt value and src value work just fine in IE6 and 7, it's just the width and height that are read as "0" no matter what.

So to reiterate, this is my code:

var imageattributes=myImage.attributes;
var imgURL = imageattributes.getNamedItem("src").value;
var imgHeight = imageattributes.getNamedItem("height").value;
var imgWidth = imageattributes.getNamedItem("width").value;
var imgAlt = imageattributes.getNamedItem("alt").value;

imgURL and imgAlt work great in all browsers.

imgHeight and imgWidth always return "0" in IE 6 and IE 7, but return the true value in IE 8, FireFox, Chrome....

Why does "width" behave differently than "src" in IE? Is there a workaround?

[Philip M]

Originally Posted by hroyale

The odd thing is that the alt value and src value work just fine in IE6 and 7, it's just the width and height that are read as "0" no matter what.

imgHeight and imgWidth always return "0" in IE 6 and IE 7, but return the true value in IE 8, FireFox, Chrome....

Why does "width" behave differently than "src" in IE? Is there a workaround?

This returns the correct width and height (200 and 100 in my test image) in IE6/7:

<img src = "one.jpg" id = "myLogo" alt="The Logo">

<script type = "text/javascript">

var myImage = document.getElementById("myLogo");

var imageattributes=myImage.attributes;
var imgURL = imageattributes.getNamedItem("src").value;
alert ("URL = " + imgURL);

var imgHeight = imageattributes.getNamedItem("height").value;
alert ("Height " + imgHeight);

var imgWidth = imageattributes.getNamedItem("width").value;
alert ("Width " + imgWidth);

var imgAlt = imageattributes.getNamedItem("alt").value;
alert ("Alt = " + imgAlt);

</script>

[vwphillips]

This returns the correct width and height (200 and 100 in my test image) in IE6/7:

only if the image has loaded(this may be the problem)

[Philip M]

Originally Posted by vwphillips

only if the image has loaded(this may be the problem)

Yes, but then the src and the alt would not show.