SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member gratiot's Avatar
    Join Date
    Jan 2003
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Obtain CSS value via JavaScript

    I have spent the better part of a day trying to figure this out, but cannot get it to work. What I am trying to do it reverse the background color of a cell with the font color and vise-versa. However for some reason I cannot get JavaScript to obtain the current assigned value of a CSS style.

    Sample code of what I am trying to do.

    Code:
    <html>
     
    <head>
    <title></title>
     
    <style type="text/css">
     
    #startmnu {position:absolute;
    	width:100px;
    	height:200px;
    	left:10px;
    	top:292px;
    	background-color:#333333;
    	border:1px solid #ffffff;
    	z-index:1}
     
    #mnutxtcll {font-family:Trebuchet MS;
    	font-size:9pt;
    	font-weight:bold;
    	text-align:center;
    	text-transform:uppercase;
    	color:#ffffff;
    	width:100px;
    	height:20px;
    	vertical-align:middle;
    	background-color:#333333;
    	cursor:hand;}
     
    #mnuhr {width:90%;height:1px;}
     
    </style>
     
    <script type="text/javascript">
     
    function InvertColors(id)
      { var bckgrdclr = document.getElementById(id).style.backgroundColor;
    	 var txtclr = document.getElementById(id).style.color;
     
    	document.getElementById(id).style.backgroundColor = txtclr;
    	document.getElementById(id).style.color = bckgrdclr;
      }
     
    </script>
    
    </head>
     
    <body>
     
    <table id="startmnu" cellpadding="0" cellspacing="0" border="0">
      <tr><td><hr id="mnuhr"/></td></tr>
      <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)">Home</td></tr>
      <tr><td><hr id="mnuhr" /></td></tr>
      <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)">Documents</td></tr>
      <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)">Favorites</td></tr>
      <tr><td><hr id="mnuhr" /></td></tr>
      <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)">Programs</td></tr>
      <tr><td><hr id="mnuhr" /></td></tr>
      <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)">Settings</td></tr>
      <tr><td><hr id="mnuhr" /></td></tr>
    </table>
     
    </body>
     
    </html>

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's why (familiar question):

    http://www.oreillynet.com/pub/a/java...p5/index5.html

    Oops...just noticed some other problems...

    onMouseOver="InvertColors(this)">

    this passes the TD object - not the id:

    function InvertColors(id)

    Don't need to use document.getElementById() if you passed the object, as you've already 'got' it. Lucky, too, since you've multiple id'd several elements, a definate no-no (ids are supposed to be unique).

    Try this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    #startmnu {position:absolute;
    	width:100px;
    	height:200px;
    	left:10px;
    	top:292px;
    	background-color:#333333;
    	border:1px solid #ffffff;
    	z-index:1}
     
    .mnutxtcll {font-family:Trebuchet MS;
    	font-size:9pt;
    	font-weight:bold;
    	text-align:center;
    	text-transform:uppercase;
    	color:#ffffff;
    	width:100px;
    	height:20px;
    	vertical-align:middle;
    	background-color:#333333;
    	cursor:hand;}
     
    .mnuhr {width:90%;height:1px;}
    
    
    </style>
    <script type="text/javascript" language="javascript">
    
    function getCSSvalue(sSelector, sAttr)
    {
    	if (typeof document.styleSheets == 'undefined')
    		return;
    	var oRegExp = new RegExp(sSelector);
    	var rules, whichRule, num_rules, SS, whichSS = 0, num_sheets = document.styleSheets.length;
    	for (whichSS; whichSS < num_sheets; ++whichSS)
    	{
    		SS = document.styleSheets.item(whichSS);
    		var ruletype = (typeof SS.rules != 'undefined') ? 'rules' : 'cssRules';
    		if (typeof SS[ruletype] == 'undefined')
    			return;
    		rules = SS[ruletype];
    		num_rules = rules.length;
    		for (whichRule = 0; whichRule < num_rules; ++whichRule)
    		{
    			rule = SS[ruletype].item(whichRule);
    			if (oRegExp.test(rule.selectorText))
    			{
    				return rule.style[sAttr];
    			}
    		}
    	}
    }
    
    function InvertColors(oTD)
    {
    	var bckgrdclr = oTD.style.backgroundColor || getCSSvalue(oTD.className, 'backgroundColor');
    	var txtclr = oTD.style.color || getCSSvalue(oTD.className, 'color');
     
    	oTD.style.backgroundColor = txtclr;
    	oTD.style.color = bckgrdclr;
      }
    
    </script>
    </head>
    <body>
    <table id="startmnu" cellpadding="0" cellspacing="0" border="0">
    <tr><td><hr class="mnuhr"/></td></tr>
    <tr><td id="Home" class="mnutxtcll" 
    onmouseover="InvertColors(this)" 
    onmouseout="InvertColors(this)">Home</td></tr>
    <tr><td><hr class="mnuhr" /></td></tr>
    <tr><td id="Documents" class="mnutxtcll" 
    onmouseover="InvertColors(this)" onmouseout="InvertColors(this)">Documents</td></tr>
    <tr><td id="Favorites" class="mnutxtcll" 
    onmouseover="InvertColors(this)" 
    onmouseout="InvertColors(this)">Favorites</td></tr>
    <tr><td><hr class="mnuhr" /></td></tr>
    <tr><td id="Programs" class="mnutxtcll" 
    onmouseover="InvertColors(this)" 
    onmouseout="InvertColors(this)">Programs</td></tr>
    <tr><td><hr id="mnuhr" /></td></tr>
    <tr><td id="Settings" class="mnutxtcll" 
    onmouseover="InvertColors(this)" 
    onmouseout="InvertColors(this)">Settings</td></tr>
    <tr><td><hr class="mnuhr" /></td></tr>
    </table>
    </body>
    </html>
    Last edited by adios; Nov 4, 2003 at 13:42.
    ::: certified wild guess :::

  3. #3
    SitePoint Member gratiot's Avatar
    Join Date
    Jan 2003
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks, Here is my draft code

    Code:
    <html>
     
    <head>
    <title></title>
     
    <style type="text/css">
     
    #startmnu {position:absolute;
    	width:100px;
    	height:200px;
    	left:10px;
    	top:292px;
    	background-color:#333333;
    	border:1px solid #000000;
    	z-index:1}
     
    #mnutxtcll {font-family:Trebuchet MS;
    	font-size:9pt;
    	font-weight:bold;
    	text-align:center;
    	text-transform:uppercase;
    	color:#ffffff;
    	width:100px;
    	height:20px;
    	vertical-align:middle;
    	background-color:#333333;
    	cursor:hand;}
     
    #mnuhr {width:90%;height:1px;}
     
    </style>
     
    <script type="text/javascript">
    function InvertColors(tdObj)
      {  bckgrdclr = tdObj.currentStyle["backgroundColor"];
    	 txtclr = tdObj.currentStyle["color"];
      
      tdObj.style.backgroundColor = txtclr;
      tdObj.style.color = bckgrdclr;
      }
     
    </script>
    </head>
     
    <body>
     
    <table id="startmnu" cellpadding="0" cellspacing="0" border="0">
      <tr><td><hr id="mnuhr"/></td></tr>
      <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)" onMouseOut="InvertColors(this)">Home</td></tr>
      <tr><td><hr id="mnuhr" /></td></tr>
      <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)" onMouseOut="InvertColors(this)">Documents</td></tr>
      <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)" onMouseOut="InvertColors(this)">Favorites</td></tr>
      <tr><td><hr id="mnuhr" /></td></tr>
      <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)" onMouseOut="InvertColors(this)">Programs</td></tr>
      <tr><td><hr id="mnuhr" /></td></tr>
      <tr><td id="mnutxtcll" onMouseOver="InvertColors(this)" onMouseOut="InvertColors(this)">Settings</td></tr>
      <tr><td><hr id="mnuhr" /></td></tr>
    </table>
     
    </body>
     
    </html>
    - Gratiot

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE-only.

    Change '#mnutxtcll' to '.mnutxtcll ' , '#mnuhr' to '.mnuhr', and:

    ><td class="mnutxtcll"......

    ><hr class="mnuhr" />
    ::: certified wild guess :::


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
  •