SitePoint Sponsor |
|
User Tag List
Results 1 to 16 of 16
-
Aug 7, 2003, 14:29 #1
- Join Date
- Feb 2003
- Location
- Canada
- Posts
- 25
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Passing CSS property values between elements using Javascript
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; }
Any suggestions?
-
Aug 7, 2003, 16:26 #2
- Join Date
- Jul 2003
- Location
- Sacramento, CA
- Posts
- 330
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
-
Aug 7, 2003, 16:45 #3
- Join Date
- Feb 2003
- Location
- Canada
- Posts
- 25
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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; }
-
Aug 7, 2003, 18:47 #4
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Aug 7, 2003, 19:25 #5
- Join Date
- Feb 2003
- Location
- Canada
- Posts
- 25
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Aug 7, 2003, 19:28 #6
- Join Date
- Jul 2003
- Location
- Sacramento, CA
- Posts
- 330
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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!
-
Aug 7, 2003, 19:47 #7
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
-
Aug 7, 2003, 19:49 #8
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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).Last edited by MikeFoster; Aug 7, 2003 at 20:20.
-
Aug 7, 2003, 19:52 #9
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
There may be another solution... but more browser-specific.
... I forgot
I'll have to look it up.
-
Aug 7, 2003, 19:56 #10
- Join Date
- Jul 2003
- Location
- Sacramento, CA
- Posts
- 330
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
-
Aug 7, 2003, 19:57 #11
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Aug 7, 2003, 19:58 #12
- Join Date
- Jul 2003
- Location
- Sacramento, CA
- Posts
- 330
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
-
Aug 7, 2003, 20:14 #13
- Join Date
- Dec 2002
- Location
- Alabama, USA
- Posts
- 2,560
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I was thinking that this is documented in some W3C standard... but I can't find it.
-
Aug 7, 2003, 21:25 #14
- Join Date
- Jul 2003
- Location
- Sacramento, CA
- Posts
- 330
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
-
Aug 9, 2003, 17:56 #15
- Join Date
- Jul 2003
- Location
- sdf
- Posts
- 33
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
hmm ... that's interesting.
-
Aug 9, 2003, 22:04 #16
- Join Date
- Jul 2003
- Location
- sdf
- Posts
- 33
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
hmm ... that's interesting.
Bookmarks