Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: getAttribute in IE?

  1. #1
    Join Date
    May 2006
    Location
    Alaska
    Posts
    163
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Default getAttribute in IE?

    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>

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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).
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    May 2006
    Location
    Alaska
    Posts
    163
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Default

    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.

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Twey View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Twey View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Twey View Post
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    May 2006
    Location
    Alaska
    Posts
    163
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •