A simple simple comparison question

Discussion in 'Javascript' started by db, Sep 27, 2006.

  1. db

    db Guest

    Hi@all

    Just got a comparison problem with javascript.

    I want to compare :
    document.getElementById(currentID).getAttribute("style") with a string,
    e.g: "background-color: lightgreen;" They are exactly the same, but
    the execution result seems they are not equal. It works with firefox,
    but not with IE.

    My code is as following:
    ..............
    var input = document.getElementById("someID");
    var content = input.getAttribute("style");
    if(content != "background-color: lightgreen;") <---this
    comparison does not work with IE
    input.style.background = "lightblue";
    ..............

    I also tried
    ..............
    var input = document.getElementById("someID");
    if(input.style.background != "lightgreen")<---this comparison
    does not work with IE either
    input.style.background = "lightblue";
    ..............

    Both of them work with Firefox. I really appreciate it if someone could
    give me a hint.

    cu

    db
    db, Sep 27, 2006
    #1
    1. Advertising

  2. db

    Randy Webb Guest

    db said the following on 9/27/2006 10:26 AM:
    > Hi@all
    >
    > Just got a comparison problem with javascript.
    >
    > I want to compare :
    > document.getElementById(currentID).getAttribute("style") with a string,
    > e.g: "background-color: lightgreen;" They are exactly the same, but
    > the execution result seems they are not equal. It works with firefox,
    > but not with IE.
    >
    > My code is as following:
    > ..............
    > var input = document.getElementById("someID");
    > var content = input.getAttribute("style");


    alert(content)

    And see what it gives you to compare against.

    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
    Randy Webb, Sep 27, 2006
    #2
    1. Advertising

  3. db

    db Guest

    Randy Webb schrieb:


    > alert(content)
    >
    > And see what it gives you to compare against.
    >
    > --
    > Randy
    > Chance Favors The Prepared Mind
    > comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    > Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/


    Hi,

    thanks for the reply. I have tried with alert thousand times......
    with IE, it returns [object], with firefox it returns the expected
    string

    db
    db, Sep 27, 2006
    #3
  4. db

    Yanick Guest

    db wrote:
    > Hi@all
    >
    > Just got a comparison problem with javascript.
    >
    > I want to compare :
    > document.getElementById(currentID).getAttribute("style") with a string,
    > e.g: "background-color: lightgreen;" They are exactly the same, but
    > the execution result seems they are not equal. It works with firefox,
    > but not with IE.
    >
    > My code is as following:
    > ..............
    > var input = document.getElementById("someID");
    > var content = input.getAttribute("style");
    > if(content != "background-color: lightgreen;") <---this
    > comparison does not work with IE
    > input.style.background = "lightblue";
    > ..............
    >
    > I also tried
    > ..............
    > var input = document.getElementById("someID");
    > if(input.style.background != "lightgreen")<---this comparison
    > does not work with IE either
    > input.style.background = "lightblue";
    > ..............
    >
    > Both of them work with Firefox. I really appreciate it if someone could
    > give me a hint.
    >
    > cu
    >
    > db


    CSS implementations may vary from browsers to browsers. All of these
    implementations have their up side, and down side. The example below
    illustrate such implementations of the style properties :

    ---------------------------------------------------
    <html>
    <head>
    </head>
    <body>

    <p id="par1" style="background-color: lightblue;">
    Hello world !
    </p>

    <script type="text/javascript">

    var test1 = 'lightblue';

    var test2 = document.getElementById("par1").getAttribute('style');

    if ( ( typeof test2 == 'string' &&
    test2 == 'background-color: ' + test1 + ';')
    || test2['backgroundColor'] == test1 ) {

    alert( 'equal' );
    } else {
    alert( 'not equsl' );
    }

    </script>

    </body>
    </html>
    ---------------------------------------------

    As you can see, when test2 is a string, you have a (for exemple)
    Mozilla browser, whereas style is an object (not necessary to compare
    that one if it is not a stsring) you have a IE browser (since
    implementations may vary from browser to browser, such affirmation is
    somewhat bold, do not consider this as a universal truth).

    Moreover, if the style should be "background: lightblue;" (yes, it's
    valid CSS), or "background-Color:lightblue;", then only IE-like CSS
    implementation would return "equal" even when the color is right.

    I would suggest that you set classes to your elements, and compare
    class names instead of style properties. Something like this :

    -----------------------------------------
    <html>
    <head>

    <style type="text/css">
    fontClass { font-weight: bold; }
    colorClass { background-color: lightblue; }
    </style>

    </head>
    <body>

    <p id="par1" class="fontClass">
    Hello world !
    </p>

    <script type="text/javascript">

    var test1 = 'colorClass';

    var test2 = document.getElementById("par1").className;

    if ( test2.indexOf( test1 ) > -1 ) {
    alert( "equal" );
    } else {
    alert( "not equal" );
    }

    </script>

    </body>
    </html>
    -----------------------------------------

    This way, you won't have to worry about how the CSS is written ; no
    regular expression or ugly string manipulations.

    Hope this helps.

    -Yanick
    Yanick, Sep 27, 2006
    #4
  5. db

    Yanick Guest

    Yanick wrote:
    [...]
    > <style type="text/css">
    > fontClass { font-weight: bold; }
    > colorClass { background-color: lightblue; }
    > </style>



    should be :

    <style type="text/css">
    .fontClass { font-weight: bold; }
    .colorClass { background-color: lightblue; }
    </style>
    Yanick, Sep 27, 2006
    #5
  6. db

    VK Guest

    db wrote:
    > thanks for the reply. I have tried with alert thousand times......
    > with IE, it returns [object], with firefox it returns the expected
    > string


    "style" attribute is not an attribute in the common HTML sense, like
    say "id", "longdesc" etc. It is not a named attribute just holding a
    string value you can simply assign and read back by
    setAttribute/getAttribute.
    It is a DOM interface, it means that on assigning new value to it you
    are triggering CSS parsing engine, and the results of parsing may
    differ dramatically from the initial argument (string value you tried
    to assign). Taking for the simplicity only two browsers to compare with
    (IE and Firefox):

    <html>
    <head>
    <title>Style</title>
    <meta http-equiv="Content-Type"
    content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function demo() {
    var foo = document.getElementById('foo');

    // Both return DOM interface object
    // on direct property use:
    //
    // window.alert(typeof foo.style);

    // Now IE still returns DOM interface object
    // while FF returns the attribute string value:
    //
    // window.alert(typeof foo.getAttribute('style'));

    // but even in FF it is not the same string:
    // it was parsed on load and by parsing rules
    // the first illegal property and enything after
    // was ignored and doesn't exists anymore
    // (no more foobar "CSS rule"):
    //
    //window.alert(foo.getAttribute('style'));

    window.alert(foo.style.backgroundColor);

    }
    window.onload = demo;
    </script>
    </head>

    <body>
    <div id="foo"
    style="width:200px; background-color: lightgreen; foobar:
    rulez"></div>
    </body>
    </html>

    you chould never use style attribute/property for any comparison
    operations. Use direct style.someRule comparison - but with a big
    caution as you can get a normalized value.

    Better yet use classes as already suggested.
    VK, Sep 27, 2006
    #6
  7. JRS: In article <>,
    dated Wed, 27 Sep 2006 07:26:31 remote, seen in
    news:comp.lang.javascript, db <> posted :
    >
    >I want to compare :
    >document.getElementById(currentID).getAttribute("style") with a string,
    >e.g: "background-color: lightgreen;" They are exactly the same, but
    >the execution result seems they are not equal. It works with firefox,
    >but not with IE.


    Try, in various browsers,
    F = document.getElementById(currentID)
    Z = F.getAttribute("style")
    for (J in Z) document.write(Z[J], "<br>")

    It's a good idea to read the newsgroup and its FAQ. See below.
    --
    © John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4 ©
    <URL:http://www.jibbering.com/faq/>? JL/RC: FAQ of news:comp.lang.javascript
    <URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
    <URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
    Dr John Stockton, Sep 28, 2006
    #7
  8. db

    db Guest

    Thanks for your great help!

    CSS field is still a blank area for me, without your hints, i have no
    chance to get through, really appreciate it!

    db
    db, Sep 28, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Jason
    Replies:
    2
    Views:
    27,827
    Phil Hanna
    Sep 20, 2003
  2. Replies:
    5
    Views:
    341
    Anton Vredegoor
    Apr 14, 2007
  3. Replies:
    5
    Views:
    111
  4. ranrodrig
    Replies:
    2
    Views:
    85
  5. Deepu
    Replies:
    1
    Views:
    236
    ccc31807
    Feb 7, 2011
Loading...

Share This Page