3

CSS：

ol{display: block;} // display: ""; throws an error in the console(FF)

HTML：

<!DOCTYPE html>
<html>
<head><script type="text/javascript">!js is here!</script>
<body>
<h2>Title</h2>
<input type="button" id="btn" value="expand" />
<ol>
    <li>Value 1</li>
    <li>Value 1</li>
    <li>Value 1</li>
</ol>
</body>
</html>

Javascript: // 尝试暂时隐藏元素

window.onload = function() {
    function expand() {
        var ol = document.getElementByTagName('ol');
        ol.style.display('none');
    }
    function init() {
        var btn = document.getElementById('btn');
        btn.addEventListener('click', expand, false);
    }
}

我一直在寻找类似的东西，我发现的所有东西都使用了一个额外的库（utility.js、jquery 等），但出于学习目的，我想在纯 JS 中执行此操作。

每个来源在线引用element.className = "newClass";。我通过创建一个类.hide{display: none;}和来尝试过.show{display: "";}，但它似乎没有做任何事情。然后我切换到操纵样式 ( element.style.display("none");)，但这似乎也不起作用。

4

3 回答 3

3

由于您的 JavaScript 在元素加载到 DOM 之前出现，因此您需要等到窗口加载完毕（或文档准备就绪，此代码段中未显示），然后才能将事件侦听器添加到按钮。

window.addEventListener('load', function() {
  document.getElementById('btn').addEventListener('click', function(e) {
    var style = document.getElementsByTagName('ol')[0].style;
    style.display = (style.display == 'none') ? 'block' : 'none';
  }, true);
}, true);

要切换显示，您可以使用displayCSS 属性设置block为显示为块元素，或none根本不显示。

于 2012-11-06T11:27:37.180 回答
3

好吧，您可能想使用 getElementsByTagName 而不是 getElementByTagName，注意它的复数形式。这将返回一个数组。

var arrayOfElements = document.getElementsByTagName('ol');
var aSingleElement = document.getElementsByTagName('ol')[0];

aSingleElement .style.display('none');
于 2012-11-06T11:30:02.717 回答
0

试试这个代码：

window.onload = function() {
    function expand() {
        var ol = document.getElementsByTagName('ol');
        ol[0].style.display = 'none';
    }
    function init() {
        var btn = document.getElementById('btn');
        btn.addEventListener('click', expand, false);
    }
    init();
}​

第一： element.style.display("none")应该element.style.display = "none"

第二：

var ol = document.getElementByTagName('ol');应该是var ol = document.getElementByTagName('ol')；加上它返回一个对象数组，您必须像这样访问您的 OL：（ol[0].style.display = 'none';假设它是您页面上唯一的 OL）

还：

ol{display: block;} // display: ""; throws an error in the console(FF)

抛出错误，因为“”不是显示的允许值。但是你可以设置element.style.display = "";

于 2012-11-06T11:22:47.490 回答