JavaScript and CSS: Properties That Contain A -

  • Thread starter Thread starter Nathan Sokalski
  • Start date Start date
N

Nathan Sokalski

I am trying to access/modify CSS properties in my JavaScript. I have been
able to do this fine with some properties, such as with the following
eventhandler:


onClick="window.alert(test.style.height);"


This would show an alert with the value used in the CSS for the height,
possibly something like "29px" However, if I try to access a CSS property
that contains a - such as the following:


onClick="window.alert(test.style.background-color);"


I recieve an error saying the following:


Error: 'color' is undefined


I am wondering if there is any kind of workaround for this, because there
are an awful lot of CSS properties that contain -'s, and it seems kind of
pointless to allow the codewriters to only access some of them. Any ideas?
Thanks.
 
Nathan Sokalski said:
I am trying to access/modify CSS properties in my JavaScript. I have been
able to do this fine with some properties, such as with the following
eventhandler:


onClick="window.alert(test.style.height);"


This would show an alert with the value used in the CSS for the height,
possibly something like "29px" However, if I try to access a CSS property
that contains a - such as the following:


onClick="window.alert(test.style.background-color);"


I recieve an error saying the following:


Error: 'color' is undefined
Click to expand...

Because the "-" symbol is the subtraction operator.
You'll find examples of style names here:

http://docs.sun.com/source/816-6408-10/style.htm


--
 
Thanks! However, I seem to have run into a problem using one of them that
seems very strange. Here is a script that I used in two pages of mine:


<script type="text/javascript">
var currpeg="PegCell0";
function pickcolor(color)
{
eval(currpeg+".style.backgroundColor=color");
//eval(currpeg+".style.height='100px'");
//window.alert("PegCell0.style.backgroundColor="+PegCell0.style.backgroundColor);
return true;
}
</script>


The script does exactly what it should and I want it to in the one page
(changes the background color of PegCell0), but it does not in the other.
However, if I uncomment the two lines that are commented out, it will change
the height, and the alert box does show whatever value was passed as the
"color" parameter. NOTE: When I call the function, I use the following code:

onClick="return pickcolor(this.style.backgroundColor);"

So I know that I am passing the values, because as you can see I have
checked using the window.alert(), and I am using the right style object
because when I try to change the height property it works. I am testing both
of these pages on the same computer with the same browser and settings (IE
6.0 on Windows XP). What might I be doing wrong? Thanks.
 
Nathan Sokalski said:
<script type="text/javascript">
var currpeg="PegCell0";
function pickcolor(color)
{
eval(currpeg+".style.backgroundColor=color");
//eval(currpeg+".style.height='100px'");

//window.alert("PegCell0.style.backgroundColor="+PegCell0.style.backgroundColor);
return true;
}
</script>
Click to expand...

Hi,

You don't need eval to do this. (And even if you use eval, your first line
should have 'color' outside of the quotes).

Try this:

var currpeg = document.getElementById('PegCell0')
function pickcolor(color)
{
currpeg.style.backgroundColor = color
}

Peter
 
Peter Torr (MS) said the following on 5/2/2006 12:14 PM:
Hi,

You don't need eval to do this. (And even if you use eval, your first line
should have 'color' outside of the quotes).

Try this:

var currpeg = document.getElementById('PegCell0')
Click to expand...

Be careful with that line though. It will throw an error if PegCell0 has
not been parsed by the browser yet.

function pickcolor(color,containerID)
{
document.getElementById(containerID.style.backgroundColor=color;
}

And call it as such:

pickColor('color','containerID');
 
Randy Webb said the following on 5/2/2006 12:27 PM:

function pickcolor(color,containerID)
{
document.getElementById(containerID.style.backgroundColor=color;
Click to expand...

Sheesh, my fingers...

Should be:

document.getElementById(containerID).style.backgroundColor=color;
 
Your suggestion was my first thought, but a page that I had run into stated
some problems with document.getElementById()

http://www.javascriptjedi.com/getElementById/

Something that I noticed on this page was something about a function called
namedItem(), but I had never heard of it before, and the documentation was
rather brief on this page, making me somewhat hesitant to use it, although
it does sound like what I would like. But I would like to see documentation
on the function in at least 2 places, because I want my code to be
compatible with the primary browsers.

(QUESTION: If I was using eval, which I did in another [simplified] page
that does the same thing using the exact same function, why would I put
color outside of the string? The code that I want evaluated is
PegCell0.style.backgroundColor=color, not
PegCell0.style.backgroundColor=orange or anything like that, because orange
is not a variable. The way I have it here is the way it is in a working page
of mine (which I can send you if you want, it's not very big), so I figured
it was right, but I make mistakes just like everyone else.)

Thank you for your help.
 
Thank you all for your help, I have found the problem, which wasn't really
JavaScript or CSS at all. I had a background="someimage.gif" attribute,
which was covering up the CSS property. I thought that the CSS was on top,
but I guess I was wrong. Thank you all for your help, and mission
accomplished!
--
Nathan Sokalski
(e-mail address removed)
http://www.nathansokalski.com/

Nathan Sokalski said:
Your suggestion was my first thought, but a page that I had run into
stated some problems with document.getElementById()

http://www.javascriptjedi.com/getElementById/

Something that I noticed on this page was something about a function
called namedItem(), but I had never heard of it before, and the
documentation was rather brief on this page, making me somewhat hesitant
to use it, although it does sound like what I would like. But I would like
to see documentation on the function in at least 2 places, because I want
my code to be compatible with the primary browsers.

(QUESTION: If I was using eval, which I did in another [simplified] page
that does the same thing using the exact same function, why would I put
color outside of the string? The code that I want evaluated is
PegCell0.style.backgroundColor=color, not
PegCell0.style.backgroundColor=orange or anything like that, because
orange is not a variable. The way I have it here is the way it is in a
working page of mine (which I can send you if you want, it's not very
big), so I figured it was right, but I make mistakes just like everyone
else.)

Thank you for your help.
Click to expand...
 
Nathan Sokalski said:
(QUESTION: If I was using eval, which I did in another [simplified] page
that does the same thing using the exact same function, why would I put
color outside of the string?
Click to expand...

Yes, sorry. My mistake. That's why eval is so evil :-)

Peter
 
"HD DVD Program Manager "

Oh brother

And look at your response Newsgroups set.

************************************************

You thought you were getting more than metrics
26 degrees average over here than in the outback

-----------------------------------------------------------
 
Back
Top