PDA

Click to See Complete Forum and Search --> : Trouble retrieving backgound color style

av_boy
02-10-2003, 06:23 PM
I am accessing Javascript from an Applet using JSObject. I would like to set the background color of my applet to the same color as the background style of the containing element.

To test, I wrote the following test code:

function getPageColor()
{
return document.getElementById( "main" ).style.backgroundColor;
}

I have defined the backgound-color for the "main" element using an external stylesheet.

...
.main{ background-color:white; color:black; font-family: Arial, Helvetica, sans-serif; border:1px solid black}

And the HTML looks like.
<table class='main' id='main' width='800' height='600' border='0' cellpadding='0' cellspacing='0'>

The problem is that the getPageColor method always returns the empty string.

I modified the code to set the background color in javascript, and when I invoke this method it returns the proper result.

Any advice from anyone? Other ways to do this?

Thanks!
av_boy
av_boy
02-10-2003, 10:50 PM
Hey Dave,

If I copy the current value of style.backgroundColor to a variable, assign style.backgroundColor to let say "red", and then reassign the original background color, the color is restored to its original state.

Is there a different way to find out what the background-color is? Do you have any suggestions of how I might achieve this and still use a style sheet?

Thanks!
av_boy
02-11-2003, 09:17 AM
One last thing... I have been looking through the javascript documentation and I cant seem to find how to get the styles collection. A snippet would help!
av_boy
02-11-2003, 10:31 AM
Ok, this is what I came up with, and it only works in IE :( .

var bgColor;
function getPageColor()
{
if( bgColor == null )
{
var numRules = document.styleSheets[0].rules.length;
for( var i = 0; i < numRules && bgColor == null; i++ )
{
if( document.styleSheets[0].rules[i].selectorText == ".main" )
{
bgColor = document.styleSheets[0].rules[i].style.backgroundColor;
}
}
}
return bgColor;
}
khalidali63
02-11-2003, 11:43 AM
the code snippet below will work for NS browsers..


<script type="text/javascript">
function GetStyleSheetProperties(){
var obj = document.getElementById("tbl");
var nsStyle = document.defaultView.getComputedStyle(obj,null);
alert(nsStyle.getPropertyValue("background-color"));
}
</script>
</head>

<body>
<table id="tbl" class="table-with-thin-border" style="width:200pt;">
<tr>
<td>
<input type="Button" value="Get Styles List" onclick="GetStyleSheetProperties();"></input>
</td>
</tr>
</table>



Cheers

Khalid
av_boy
02-11-2003, 11:55 AM
Thanks Khalid,

Is that for NS4? I am running mozilla and this is what I came up with. I will definitely give your post a try.



function getStyleProperty( className, propertyName )
{
return getStyle( className )[propertyName];
}



var _getStyleMethod1Supported=document.styleSheets[0].rules?1:0;
var _getStyleMethod2Supported=document.styleSheets[0].cssRules?1:0;
function getStyle( className )
{
if( _getStyleMethod1Supported )
{
var numRules = document.styleSheets[0].rules.length;
for( var i = 0; i < numRules; i++ )
{
if( document.styleSheets[0].rules[i].selectorText == className )
{
return document.styleSheets[0].rules[i].style;
}
}
}
else if( _getStyleMethod2Supported )
{
var numRules = document.styleSheets[0].cssRules.length;
for( var i = 0; i < numRules; i++ )
{
if( document.styleSheets[0].cssRules[i].selectorText == className )
{
return document.styleSheets[0].cssRules[i].style;
}
}
}
}
khalidali63
02-11-2003, 12:08 PM
It will work for NS6 browsers.

Khalid