PDA

View Full Version : 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.

<!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
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:


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
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
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:

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

document.getElementsByTagName ("div") [i].class
works in FF, while getAttribute does. I'm really confused.

jscheuer1
08-22-2007, 04:30 AM
Well, uh, Twey. Nither:

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

document.getElementsByTagName ("div") [i].class
works in FF, while getAttribute does. I'm really confused.

That's what both of us have been trying to say, though we could have been doing a better job of it. Where I posted:

http://www.dynamicdrive.com/forums/showpost.php?p=106030&postcount=5

I thought I was doing a fairly good job of it. What you need to use is:


document.getElementsByTagName ("div") [i]["className"]
or:

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

This works in all modern browsers.

???
08-22-2007, 02:55 PM
Ohhhh, sorry for not understanding.You use className insted of class? That makes much more sense. Thanks.