Passing HTML and CSS to Javascript

Question

I need to find a way to pass the visible div to javascript. This may not even be the best way to accomplish what I'm trying to accomplish, so I'm open for other suggestions.

All my site content opens in a single overlay. When a button is clicked in the navigation, that content opens in the overlay. When another button is clicked, that content replaces the current content in the overlay. And so on.

The best identifier (that I've spotted) of which overlay is open, is (CSS) display:block ...
and all the hidden divs are display:none ....

So I want to pass which div has the display:block to javascript (Note: all the div's have unique ID's)

I'm sure this is something easy, But I can't seem to find it...

Thanks in advance for your time!!

Answer 1

Each HTML element in JS has style property. You can read and change element style by calling for example

document.getElementById('id').style.display

So you don't need to pass anything to JS, it's already there.

Answer 2

By reading your question it sounds like you need to identify which of your divs is the visible one. The easiest way to do that is add a class to all your divs with content, you can then use document.getElementsByClassName() to get a list of them and loop through to find which one is visible one based on a display property of block .

<div class="content" style="display: none";>a</div>
<div class="content" style="display: block;">b</div>
<div class="content" style="display: none";>c</div>
<div class="content" style="display: none";>d</div>
<div class="content" style="display: none";>e</div>

var elements = document.getElementsByClassName("content");

for(i = 0; i < elements.length; i++) 
{
     if (elements[i].style.display == 'block')
     {
          // elements[i] = this is the visable div 
          alert('This elements[i] has a display of block; contents =  ' + elements[i].innerText);  
     }
}

The above script will output/alert 'b' as it is the visible div found. Fiddle link