getAttribute in IE?

**???** · 08-21-2007, 03:27 PM

I was wondering if getAttribute works in IE. I have some code and I put alerts in it for debugging, and it appears to stop at the line with getAttribute. My entire page is: but I doubt it's very important.

Code:

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>
The Spartan II Project - 
</title>
<link rel="shortcut icon" type="image/ico" href="favicon.ico"></link>
<script type="text/javascript" src="js\database.js" id="databaseget"></script>
<script type="text/javascript" src="js\loader.js" id="loader"></script>
<script type="text/javascript" src="js\unloader.js" id="unloader"></script>
<script type="text/javascript" id="init">
var Variables = new Object ();
//Buttons
var resetBBG = function () {
for (var i = 0;i < document.getElementsByTagName ("div").length;i = i + 1) {
if (document.getElementsByTagName ("div") [i].getAttribute ("class") == "button") {
document.getElementsByTagName ("div") [i].style.backgroundImage = 'url("img/btn-normal.png")';
}
}
}
window.onload = function () {
for (var i = 0;i < document.getElementsByTagName ("div").length;i = i + 1) {
if (document.getElementsByTagName ("div") [i].getAttribute ("class") == "button") {
document.getElementsByTagName ("div") [i].onmousedown = function () {
this.style.backgroundImage = 'url("img/btn-down.png")';
}
document.getElementsByTagName ("div") [i].onmouseout = function () {
this.style.backgroundImage = this.getAttribute ("fakeBG");
}
document.getElementsByTagName ("div") [i].onmouseover = function () {
this.setAttribute ("fakeBG",this.style.backgroundImage);
this.style.backgroundImage = 'url("img/btn-over.png")';
}
document.getElementsByTagName ("div") [i].onclick = function () {
resetBBG ();
this.style.backgroundImage = 'url("img/btn-pressed.png")';
this.setAttribute ("fakeBG",this.style.backgroundImage);
}
document.getElementsByTagName ("div") [i].innerHTML = "<div class='buttonI'>" + document.getElementsByTagName ("div") [i].innerHTML + "<\/div>";
}
}
}
</script>
<style type="text/css">
html {
cursor: url("cursor.cur"),pointer;
height: 100%;
}
unloading {
display: none;
}
content {
visibility: hidden;
}
.button {
width: 208px;
height: 36px;
background-image: url("img/btn-normal.png");
}
.buttonI {
position: relative;
color: white;
font-family: timesnewroman;
font-size: 12pt;
font-weight: bold;
text-align: center;
top: 20%;
}
</style>
</head>
<body>
<div class="button">Hi All</div><div class="button">Hi all</div><div class="button">Hi all</div>
</body>
</html>

**Twey** · 08-21-2007, 03:34 PM

I was wondering if getAttribute works in IE. I have some code and I put alerts in it for debugging, and it appears to stop at the line with getAttribute.

It does, but not in the same way: you have to use getAttribute("className") in IE.

There's no need to use getAttribute() in Javascript, it's meant for languages that have no means of retreiving a property by its name (remember that the DOM is a language-agnostic specification). In ECMAScript we have square bracket notation, so getAttribute() is just unnecessary overhead.

It's also generally bad style to attach custom properties to elements. You can generally use a closure instead.

You're calling getElementsByTagName() one heck of a lot there. This is quite a costly function. As with any operation, instead, store the reference returned the first time and reuse it (but remember to null it at the end to prevent memory leaks in IE).

**???** · 08-21-2007, 03:39 PM

So how else might I do it? Or what do you mean by className? I was thinking that there were alot of getElementsByTagName("div")[i] though.

**Twey** · 08-21-2007, 03:52 PM

So how else might I do it?

In Javascript, element.propertyName is quite sufficient unless you need to get a property by its name dynamically, in which case you need to use square bracket notation as I said above: element['propertyName'].

Or what do you mean by className?

What?

**jscheuer1** · 08-21-2007, 04:44 PM

Originally Posted by Twey

Or what do you mean by className?

What?

Unless one is using the getAttribute method in a browser other than IE, the class attribute of an element is referred to as its className in javascript. This makes getting the class attribute much simpler if done like so:

Code:

var whatever=element.className;

which works in virtually all browsers.

getAttribute does have some useful aspects to it in javascript. It can overcome a myriad of case sensitivity issues if used with proper knowledge and forethought. This can be done other ways, though often not with such economy of code.

**Twey** · 08-21-2007, 04:47 PM

getAttribute does have some useful aspects to it in javascript. It can overcome a myriad of case sensitivity issues if used with proper knowledge and forethought.

I wasn't aware that case sensitivity could be an issue... could you give an example?

**jscheuer1** · 08-21-2007, 06:48 PM

Originally Posted by Twey

I wasn't aware that case sensitivity could be an issue... could you give an example?

I am only aware of this issue in IE. What happens is with certain attributes like:

allowTransparency

and:

frameBorder

is even though the browser will parse these if written in any combination of upper and lower case letters in the markup, the script parser requires that they be in the above form, or it might be:

AllowTransparency

and:

FrameBorder

I never can remember, and don't have to with:

getAttribute('frameborder', 0);

Which other browsers are equally happy with, though the don't require it. This can be even more crucial with setAttribute in scripting, when accepting user input for the attribute names, with the previously noted exception of class.

**Twey** · 08-21-2007, 07:31 PM

I am only aware of this issue in IE. What happens is with certain attributes like:

allowTransparency

and:

frameBorder

is even though the browser will parse these if written in any combination of upper and lower case letters in the markup, the script parser requires that they be in the above form, or it might be:

AllowTransparency

and:

FrameBorder

I never can remember, and don't have to with:

getAttribute('frameborder', 0);

It's allowTransparency and frameBorder, exactly the same as any other property in Javascript. That's the joy of conventions. I really don't consider this a valid use.

**jscheuer1** · 08-21-2007, 08:04 PM

Originally Posted by Twey

It's allowTransparency and frameBorder, exactly the same as any other property in Javascript. That's the joy of conventions. I really don't consider this a valid use.

Don't use it then. Just don't complain to me when your script fails in IE.

**???** · 08-22-2007, 03:37 AM

Well, uh, Twey. Nither:

Code:

document.getElementsByTagName ("div") [i]["class"]

or:

Code:

document.getElementsByTagName ("div") [i].class

works in FF, while getAttribute does. I'm really confused.

Thread: getAttribute in IE?

Thread Tools

Search Thread

getAttribute in IE?

Bookmarks

Bookmarks

Posting Permissions