Question

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");），但这似乎也不起作用。

Answer 1

由于您的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);

要切换显示，您可以使用设置为display的{{1}} CSS属性作为块元素显示，或者block显示为不显示。

Answer 2

那么你想使用getElementsByTagName而不是getElementByTagName，注意它的复数。然后这将返回一个数组。

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

aSingleElement .style.display('none');

Answer 3

试试这段代码：

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 = "";

在鼠标单击时使用javascript隐藏元素并在第二次单击时显示

3 个答案: