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

要素がDOMに読み込まれる前にJavaScriptが表示されるため、イベントリスナーをボタンに追加する前に、ウィンドウが読み込まれるまで（または、ドキュメントの準備が整い、このスニペットには表示されません）待つ必要があります。

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

getElementByTagNameの代わりにgetElementsByTagNameを使用することをお勧めします。複数形に注意してください。これにより、配列が返されます。

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"

2番：

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 に答える