Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > A simple simple comparison question

Reply
Thread Tools

A simple simple comparison question

 
 
db
Guest
Posts: n/a
 
      09-27-2006
Hi@all

Just got a comparison problem with javascript.

I want to compare :
document.getElementById(currentID).getAttribute("s tyle") 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

 
Reply With Quote
 
 
 
 
Randy Webb
Guest
Posts: n/a
 
      09-27-2006
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("s tyle") 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/
 
Reply With Quote
 
 
 
 
db
Guest
Posts: n/a
 
      09-27-2006

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

 
Reply With Quote
 
Yanick
Guest
Posts: n/a
 
      09-27-2006
db wrote:
> Hi@all
>
> Just got a comparison problem with javascript.
>
> I want to compare :
> document.getElementById(currentID).getAttribute("s tyle") 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('styl e');

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

 
Reply With Quote
 
Yanick
Guest
Posts: n/a
 
      09-27-2006
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>

 
Reply With Quote
 
VK
Guest
Posts: n/a
 
      09-27-2006

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.

 
Reply With Quote
 
Dr John Stockton
Guest
Posts: n/a
 
      09-28-2006
JRS: In article <(E-Mail Removed) om>,
dated Wed, 27 Sep 2006 07:26:31 remote, seen in
news:comp.lang.javascript, db <(E-Mail Removed)> 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.
 
Reply With Quote
 
db
Guest
Posts: n/a
 
      09-28-2006
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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Comparison of 2 files and generating the output based on comparison Deepu Perl Misc 1 02-07-2011 03:09 PM
Price Comparison Service. Best Deal. Special Coupon atBest-Price-Comparison.com rapee Digital Photography 0 03-14-2008 06:46 AM
Simple integer comparison problem tom@finland.com Python 5 04-14-2007 05:26 PM
Simple Lens Comparison EF70-200 f4.0L IS w/Canon 1.4X vs EF70-300 DO IS Alndonna Digital Photography 0 03-21-2007 01:06 AM
simple jsp string comparison Jason Java 2 09-20-2003 12:16 AM



Advertisments