html - Turn an element's CSS on/off using JavaScript -

i have following block of html using highlight particular area of .png file:

<div id="container">     <img src="http://www.placekitten.com/200/200" />     <div id="highlight"></div> </div> 

its corresponding css code looks this:

#container {     positioon:relative; } #highlight {     position:absolute;     width:75px;     height:75px;     top:75px;     left:75px;     background: rgba(255, 0, 0, 0.4); } 

both can seen working on following page.

the code works fine, figure out way turn highlighting on/off having javascript function in control of feature. javascript novice, , not sure how approach this. want able pass variable javascript function, , based on boolean variable, either activate, or deactivate shading.

can show me how this?

thanks in advance reply.

function togglehighlight(on) {   var el = document.getelementbyid('highlight');    el.style['display'] = on ? 'block' : 'none'; } 

called as:

togglehighlight(true);  // turn on togglehighlight(false); // turn off