将HTML和CSS传递给Javascript

我需要找到一种方法将可见div传递给javascript。这可能不是完成我想要完成的最好方法，所以我愿意接受其他建议。将HTML和CSS传递给Javascript

我的所有网站内容均打开在一个叠加层中。在导航中点击某个按钮时，该内容会在叠加层中打开。当单击另一个按钮时，该内容将替换叠加层中的当前内容。等等。

最好的标识符（我已经发现了），它的覆盖是开放的，是（CSS）display:block ...
和所有隐藏的div是display:none ....

所以，我想通过这DIV有display:block给JavaScript（注：所有div的具有唯一的ID）

我敢肯定，这是一件很容易的，但我似乎无法找到它......

预先感谢您时间！！

来源

2011-11-16 Brett

那么最简单的方法来实现你所说的只是在javascript中制作一张地图。因此，为第一个屏幕设置'var a = 0;'，为第二个屏幕设置'a = 1'等然后只需在需要更新可见性时检查变量？ – Yuri

我很好奇为什么你不只是从点击事件中捕获id。如果你把id放在一个变量中，显示的最后一个将永远在那里。 – COBOLdinosaur

@Yuri你失去了我在那里，我不是很棒的JS .... – Brett

JS中的每个HTML元素都有style属性。你可以阅读，并通过调用例如

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

改变的元素风格所以你不需要任何东西传递给JS，它已经存在。

来源

2011-11-16 18:09:19 Krzysztof

当然，但这种复杂性远远高于跟踪全局变量。 – Yuri

然后，这会传递元素的ID到JS作为一个变量命名为相同的HTML元素?? – Brett

我不完全理解你的问题，但我试图更具体。在JS中，你只需要这个覆盖div的标识符，你可以将它们存储在数组中。然后你可以遍历这个数组，并检查女巫元素是否可见，如下所示： 'var ids = ['id1'，'id2']; （var i = 0; i Krzysztof

通过阅读你的问题，它听起来像你需要确定哪些div是可见的。最简单的方法是向所有包含内容的div添加一个类，然后可以使用document.getElementsByClassName()获取它们的列表，并根据block的display属性循环查找哪一个可见。

<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); 
    } 
}

上面的脚本会输出/ alert'b'，因为它是可见的div。 Fiddle link

来源

2011-11-16 18:12:53

谢谢杰夫。每次显示更改时都会更新吗？以及我需要在下一个功能中使用的输出是什么？它只是输出“b”？ – Brett

将HTML和CSS传递给Javascript

回答

相关问题