A simple simple comparison question

D

db

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
 
R

Randy Webb

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");
Click to expand...

alert(content)

And see what it gives you to compare against.
 
Y

Yanick

db said:
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
Click to expand...

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
 
Y

Yanick

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


should be :

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

VK

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

"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.
 
D

Dr John Stockton

JRS: In article <[email protected]>,
dated Wed, 27 Sep 2006 07:26:31 remote, seen in
news:comp.lang.javascript said:
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.
Click to expand...

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.
 
D

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Picture Comparison Code Not Working Properly 1
About as basic "Newbie-Question" that you can get. 3
I Need Help with making a function that draws in a canvas using location data. 1
I need help making a zooming function 11
Need help , Having problem with Drag n Drop... 1
Simple password login 7
How to position the *tooltip* comment on these buttons? 9
Need help , Having problem with Drag n Drop ? 9

Members online

No members online now.
Total: 36 (members: 0, guests: 36)
Robots: 668

Forum statistics

Threads
473,769
Messages
2,569,579
Members
45,053
Latest member
BrodieSola

Latest Threads

Top