By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,944 Members | 1,633 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,944 IT Pros & Developers. It's quick & easy.

A simple simple comparison question

P: n/a
db
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

Sep 27 '06 #1
Share this Question
Share on Google+
7 Replies


P: n/a
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/
Sep 27 '06 #2

P: n/a
db

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

Sep 27 '06 #3

P: n/a
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

Sep 27 '06 #4

P: n/a
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>

Sep 27 '06 #5

P: n/a
VK

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.

Sep 27 '06 #6

P: n/a
db
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

Sep 28 '06 #7

P: n/a
JRS: In article <11********************@h48g2000cwc.googlegroups.c om>,
dated Wed, 27 Sep 2006 07:26:31 remote, seen in
news:comp.lang.javascript, db <ad******@gmail.composted :
>
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.htmjscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/TP/BP/Delphi/jscr/&c, FAQ items, links.
Sep 28 '06 #8

This discussion thread is closed

Replies have been disabled for this discussion.