隐藏与鼠标点击和展示上的JavaScript元素第二点击

CSS：隐藏与鼠标点击和展示上的JavaScript元素第二点击

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 e ），但为了学习的目的，我想在纯JS中做到这一点。

每个来源在线引用element.className = "newClass";。我试图通过制作类.hide{display: none;}和.show{display: "";}，但它似乎没有做任何事情。然后我转向操纵风格（element.style.display("none");），但这似乎也不奏效。

来源

2012-11-06 ejx

不应该是'ol.style.display =“none”'？ – Patrick

你收到什么错误？ –

至于出现在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 CSS属性设置为block用于显示为块元件，或用于none不显示在所有。

来源

2012-11-06 11:27:37 steveukx

要看到这在行动：http://jsfiddle.net/steveukx/yQQ4v/值得注意的是，我的例子也假设addEventListener的可用性，以迎合使用attachEvent的IE版本，而不是检查http://www.quirksmode.org/js/events_advanced.html – steveukx

试试这个代码：

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-06 11:22:47

给我一个错误“TypeError：ol [0] .style.display不是一个函数@ /expand.html:10” – ejx

看到这个演示：http：//jsfiddle.net/9A2Q7/。它在那里工作得很好。你确定你有'ol [0] .style.display =“none”'而不是'ol [0] .style.display（“none”）'？错误听起来像你有'ol [0] .style.display（“none”）'这是不正确的 –

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

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

aSingleElement .style.display('none');

来源

2012-11-06 11:30:02 4Dev

隐藏与鼠标点击和展示上的JavaScript元素第二点击

回答

相关问题