Passing CSS property values between elements using Javascript

**Goldeneye** · Aug 7, 2003, 13:29

I'm trying to make a TD take on a colour from another element on the page. I have another <TD> on the page with ID='menuholderbottomcoloursample'.

Code:

function toggleHighlight (highlightedItem){
// get the element who's colour i want to copy
   var swabColourItem;
   swabColourItem = document.getElementById('menuholderbottomcoloursample');

// get the colour of that element   
   var swabColour;
   swabColour = swabColourItem.style.height;

// specify the element to be coloured   
   var menuitem;
   menuitem = document.getElementById(highlightedItem);

// colour it   
   menuitem.style.color = swabColour;
	return false;
}

The script does nothing when 'menuitem.style.color' = a variable. But it works when it = a set text value like "#FFFFFF".

Any suggestions?

**Poop_Shoot** · Aug 7, 2003, 15:26

I dont know if I understand you completly! Maybe this will help!

Code:

<html>
<head>
<script>
function changeCellText(whichCell,changeCell){
var colorChg=document.getElementById(whichCell).style.color;
document.getElementById(changeCell).style.color=colorChg;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<table>
<tr>
	<td id="cell1" style="color:blue;">
	This Is Some Text!
	</td>
</tr>
<tr>
	<td id="cell2">
	This Is Some More Text!
	</td>
</tr>
</table>
<a href="javascript:changeCellText('cell1','cell2')">Change Cell Text</a>
</body>
</html>

**Goldeneye** · Aug 7, 2003, 15:45

Hmmm. That would seem to do it. In fact, that's basically what I have, but it doesn't work.
Here's a simplified version of my code.

Code:

 function toggleHighlight (highlightedItem){
// get the colour i want to copy
   var swabColour = document.getElementById('menuholderbottomcoloursample').style.color;
// colour it
   document.getElementById(highlightedItem).style.color = swabColour;
	return false;
}

But this doesn't work.

**MikeFoster** · Aug 7, 2003, 17:47

Hi Goldeneye,

Perhaps this is it:

The CSS2 properties exposed by an Element's style object correspond to the HTML element's style attribute, not to the CSS class applied to the element. If the style attribute is not initialized then the following displays nothing (an empty string):

<script>
ele = document.getElementById('d1');
alert(ele.style.color);
</script>

Even if you have...

<style>
#d1 { color:#ccc; }
</style>
</head>
<body>
<div id='d1'></div>

...the previous alert() will display nothing.

There are two ways to initialize the style object's properties:

1. With script.

2. With the style attribute:

<div id='d1' style='color:#ccc'></div>

Now the above alert() will display the element's text color.

I don't like using inline styles so I would go with #1, but the choice is yours.

**Goldeneye** · Aug 7, 2003, 18:25

I see. I had a feeling it was someting like that. So with Javascript there is no way of actually retrieving the CSS 'background-color' property of a specific document element? I don't want to initialize it with script if I have to hardcode the colour. I want to be able to specify the colours in the CSS.

**Poop_Shoot** · Aug 7, 2003, 18:28

Once again I am confused! If you are wondering if you can retreive CSS properties with javascript yes you can! I will try and cook up an example for you!

**MikeFoster** · Aug 7, 2003, 18:47

Hi Poop_Shoot,

You've already provided a perfect example in your post above. I've modified it slightly below. I removed the inline style and added a style class in the head. This one doesn't work, but your original post does.

Code:

<html>
<head>
<style>
.cell {
  color:#00f;
}
</style>
<script>
function changeCellText(whichCell,changeCell){
var colorChg=document.getElementById(whichCell).style.color;
document.getElementById(changeCell).style.color=colorChg;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<table>
<tr>
<td id="cell1" class='cell'>
This Is Some Text!
</td>
</tr>
<tr>
<td id="cell2">
This Is Some More Text!
</td>
</tr>
</table>
<a href="javascript:changeCellText('cell1','cell2')">Change Cell Text</a>
</body>
</html>

**MikeFoster** · Aug 7, 2003, 18:49

Goldeneye,

In browsers with sufficient DOM support (Mozilla) you can access the properties in the stylesheet itself.

*edit*

You can do it in IE too (non-standard).

**MikeFoster** · Aug 7, 2003, 18:52

There may be another solution... but more browser-specific.

... I forgot

I'll have to look it up.

**Poop_Shoot** · Aug 7, 2003, 18:56

I was working on this to show example but it doesnt seem to work!

Code:

<html>
<head>
<style>
#theTable{color:blue;background-color:white;font-size:18px;} 
</style>
<script>
function showMe(element){
var elemColor=document.getElementById(element).style.color;
var elemBgColor=document.getElementById(element).style.backgroundColor;
var elemFontSize=document.getElementById(element).style.fontSize;
alert("These Are The Properties Of that Element:\n Color: "+elemColor+"\nBgColor: "+elemBgColor+"\nFontSize: "+elemFontSize);
}
</script>
</head>
<body bgcolor="#FFFFFF">
<table id="theTable">
<tr>
	<td>
	THIS IS SOME TEXT! THIS IS SOME TEXT! THIS IS SOME TEXT! THIS IS SOME TEXT!
	<td>
</tr>
</table>
<form>
<input type="button" value="Show Me" onclick="showMe('theTable')">
</form>
</body>
</html>

**MikeFoster** · Aug 7, 2003, 18:57

Goldeneye,

In Mozilla you can do this:

document.defaultView.getComputedStyle(ele,"").getPropertyValue('backgroundColor')

...although I've never tried it with the backgroundColor property. I use it for width and height.

In IE you can do this:

ele.currentStyle.backgroundColor

...again, I've never tried it with the backgroundColor property.

Try the above without using inline styles, and only defining your color in the stylesheet.

**Poop_Shoot** · Aug 7, 2003, 18:58

Why dosent it work when you set it in the head!

Code:

<html>
<head>
<style>
.cell {
  color:#00f;
}
</style>
<script>
function changeCellText(whichCell,changeCell){
var colorChg=document.getElementById(whichCell).style.color;
document.getElementById(changeCell).style.color=colorChg;
}
</script>
</head>
<body bgcolor="#FFFFFF">
<table>
<tr>
<td id="cell1" class='cell'>
This Is Some Text!
</td>
</tr>
<tr>
<td id="cell2">
This Is Some More Text!
</td>
</tr>
</table>
<a href="java script:changeCellText('cell1','cell2')">Change Cell Text</a>
</body>
</html>

It should work!

**MikeFoster** · Aug 7, 2003, 19:14

I was thinking that this is documented in some W3C standard... but I can't find it.

**Poop_Shoot** · Aug 7, 2003, 20:25

Found it this works fine!

See It In Action http://www.sacspots.com/Copy%20of%20blah.html

Code:

<html>
<head>
<style>
#theTable{color:blue;background-color:white;font-size:18px;} 
</style>
<script>
function showMe(element){
var elemColor=document.getElementById(element).currentStyle.color;
var elemBgColor=document.getElementById(element).currentStyle.backgroundColor;
var elemFontSize=document.getElementById(element).currentStyle.fontSize;
alert("These Are The Properties Of that Element:\n Color: "+elemColor+"\nBgColor: "+elemBgColor+"\nFontSize: "+elemFontSize);
}
</script>
</head>
<body bgcolor="#FFFFFF">
<table id="theTable">
<tr>
	<td>
	THIS IS SOME TEXT! THIS IS SOME TEXT! THIS IS SOME TEXT! THIS IS SOME TEXT!
	<td>
</tr>
</table>
<form>
<input type="button" value="Show Me" onclick="showMe('theTable')">
</form>
</body>
</html>

**xxxyyy** · Aug 9, 2003, 16:56

hmm ... that's interesting.

**xxxyyy** · Aug 9, 2003, 21:04

hmm ... that's interesting.

The SitePoint Forums have moved.

User Tag List

Thread: Passing CSS property values between elements using Javascript

Thread Tools

Display

Passing CSS property values between elements using Javascript

Bookmarks

Bookmarks

Posting Permissions