SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Enthusiast
    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;
    }
    The script does nothing when 'menuitem.style.color' = a variable. But it works when it = a set text value like "#FFFFFF".

    Any suggestions?

  2. #2
    Under Construction Poop_Shoot's Avatar
    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>

  3. #3
    SitePoint Enthusiast
    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;
    }
    But this doesn't work.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    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.


  5. #5
    SitePoint Enthusiast
    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.

  6. #6
    Under Construction Poop_Shoot's Avatar
    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!

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    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>

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    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.

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    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.

  10. #10
    Under Construction Poop_Shoot's Avatar
    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>

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    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.

  12. #12
    Under Construction Poop_Shoot's Avatar
    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>
    It should work!

  13. #13
    I'll take mine raw silver trophy MikeFoster's Avatar
    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.

  14. #14
    Under Construction Poop_Shoot's Avatar
    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>

  15. #15
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    sdf
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm ... that's interesting.

  16. #16
    SitePoint Enthusiast
    Join Date
    Jul 2003
    Location
    sdf
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm ... that's interesting.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •