JavaScript and CSS: Properties That Contain A -
Nathan Sokalski
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
njsok...@hotmail.com
http://www.nathansokalski.com/
Nathan Sokalski
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
njsok...@hotmail.com
http://www.nathansokalski.com/
"Lee" <REM0VElb...@cox.net> wrote in message
news:e3666...@drn.newsguy.com...
> 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
>
> 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
>
>
> --
>
Peter Torr (MS)
news:edicm6Zb...@TK2MSFTNGP03.phx.gbl...
> <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>
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 - http://blogs.msdn.com/ptorr
HD DVD Program Manager
Randy Webb
> "Nathan Sokalski" <njsok...@hotmail.com> wrote in message
> news:edicm6Zb...@TK2MSFTNGP03.phx.gbl...
>> <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>
>
> 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')
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
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Randy Webb
<snip>
> function pickcolor(color,containerID)
> {
> document.getElementById(containerID.style.backgroundColor=color;
Sheesh, my fingers...
Should be:
document.getElementById(containerID).style.backgroundColor=color;
Nathan Sokalski
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.
--
Nathan Sokalski
njsok...@hotmail.com
http://www.nathansokalski.com/
"Peter Torr (MS)" <pt...@microsoft.com> wrote in message
news:%239HL4Ng...@TK2MSFTNGP04.phx.gbl...
Nathan Sokalski
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" <njsok...@hotmail.com> wrote in message
news:OHW5fwgb...@TK2MSFTNGP03.phx.gbl...
Peter Torr (MS)
> (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?
Yes, sorry. My mistake. That's why eval is so evil :-)
asdf
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
-----------------------------------------------------------
"Peter Torr (MS)" <pt...@microsoft.com> wrote in message
news:%239HL4Ng...@TK2MSFTNGP04.phx.gbl...