Jump to content

Remove style.backgroundColor


DarkxPunk
 Share

Recommended Posts

So here is my JS:

function hideShow(a) {a.innerHTML = a.innerHTML == "Row" ? "Row" : "Row";var show_hide_ref= a.parentNode.id.replace("row", "info");var show_hide = document.getElementById(show_hide_ref)show_hide.style.height == "100px" ? show_hide.style.height="1px" : show_hide.style.height="100px";show_hide.style.backgroundColor == "#ffffff" ? show_hide.style.backgroundColor="" : show_hide.style.backgroundColor="#ffffff";}

As you can see its a simple toggle, but for some reason it ignores the blank "" and keeps it white. Any ideas on how to just remove it? Thanks!

Edited by DarkxPunk
Link to comment
Share on other sites

It may be because the browser is returning the background color in rgb() format: rgb(255, 255, 255) You could simplify your expression to this:

show_hide.style.backgroundColor = (show_hide.style.backgroundColor == "#ffffff" ? "" : "#ffffff"); 

Link to comment
Share on other sites

Thanks for the simplified version. Yes it was exactly that. The browser was returning it as rgb which once I replaced it fixed it. Now will this work in all browsers you think? Here is the new JS:

function hideShow(a) {var show_hide_ref = a.parentNode.id.replace("row", "info");var show_hide = document.getElementById(show_hide_ref);show_hide.style.height = (show_hide.style.height == "20px" ? "1px" : "20px");show_hide.style.backgroundColor = (show_hide.style.backgroundColor == "rgb(255, 255, 255)" ? "" : "rgb(255, 255, 255)");}

Edited by DarkxPunk
Link to comment
Share on other sites

I'm not sure. Some browsers might return RGB while others return it exactly the same way as it was given. You could check for both #ffffff and rgb().Some people toggle the classname of an element rather than change the style.

Link to comment
Share on other sites

Toggling the class name is a interesting idea. Currently I just told it to use RGB so I think it will be alright. If I run into compatibility problems I will take my shot at the class toggling (JS is so confusing at times if you don't understand all the logic behind it) Thanks again Ingolme!

Link to comment
Share on other sites

All you have to do is use a variable to store and check the bg color value, if rgb convert to hex, and check this variable value

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>LED</title>  <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8">  <script type="text/javascript">/*<![CDATA[*//*---->*/function hideShow(a,e) {e.preventDefault();a.innerHTML = a.innerHTML == 'Show Info' ? 'Hide Info' : 'Show Info';var show_hide_ref= a.parentNode.id.replace("row", "info");var show_hide = document.getElementById(show_hide_ref)//show_hide.style.display = (show_hide.style.display == 'block' ? 'none' : 'block');var currentBG = show_hide.style.backgroundColor.toLowerCase();if(currentBG == "rgb(255, 255, 255)")    {    currentBG = "#ffffff";    }show_hide.style.backgroundColor = currentBG == "#ffffff" ? "red" : "#ffffff";}window.onload=function(){parent_elem=document.getElementById("pageWrap");child_div =parent_elem.getElementsByTagName("div");for(i=0; i<child_div.length;i++){if(child_div[i].className=="info"){child_div[i].style.backgroundColor="#ffffff";}}}/*--*//*]]>*/</script><style type="text/css">/*.info{display:none;}*/</style></head><body>  <div id="pageWrap">   <div class="row" id="row1">Row (<a href="#" onClick="hideShow(this,event)">Show Info</a>)</div>   <div class="row" id="row2">Row (<a href="#" onClick="hideShow(this,event)">Show Info</a>)</div>   <div class="row" id="row3">Row (<a href="#" onClick="hideShow(this,event)">Show Info</a>)</div>   <div class="row" id="row4">Row (<a href="#" onClick="hideShow(this,event)">Show Info</a>)</div>   <div class="info" id="info1">Info1</div>   <div class="info" id="info2">Info2</div>   <div class="info" id="info3">Info3</div>   <div class="info" id="info4">Info4</div>  </div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...