1

次のコードを使用してボックスを非表示および表示しようとしています。これは機能しますが、ボックスはデフォルトで表示されます。ボックスを非表示にしてクリック時のみ表示することはできますか? 現在、onclick はボックスを非表示にします。

<script type="text/javascript">
function display(id) {
var obj = document.getElementById(id)
if (obj.style.display == "none") {
obj.style.display = "block"
    }
else {
    obj.style.display = "none"
    }
return false
}
</script>

 <form>
<input type="button" value="Customize" onclick="display('box1_<?=$pd_id?>')">
<input type="submit">
</form>
4

6 に答える 6

3

1) スタイルまたは css クラスをオブジェクトに追加するだけです。

<input type="button" style="display:none" value="Customize" onclick="display()">

2)イベントから要素を抽出するだけです:

   function display(evnt) {
    var obj = evnt.target;
    obj.style.display = (obj.style.display === 'none') ? 'block' : 'none'; // (cond) ? <do> : <else>
}

jsFiddle の例の動作例 (getDocument 行は無視してください。もちろん、一度非表示にすると、もう表示されません..;)

http://jsfiddle.net/BRa9n/

于 2013-05-19T16:03:20.673 に答える
1

スタイルシートまたはインラインスタイリングに以下を追加します

style="display: none;"
于 2013-05-19T16:08:39.207 に答える
0

もちろん、JavaScript なしでこれを行うことは可能です (ただし、HTML はもう少し複雑になり、:checked疑似セレクターのサポートに依存します。HTML を考えると:

<form>
    <label class="button" for="customize">Customize</label>
    <input type="checkbox" id="customize" />
    <input id="submit" />
</form>

そしてCSS:

label.button {
    padding: 0.2em 0.4em;
    -webkit-appearance: button;
}

#customize {
    display: none;
}

#customize + #submit {
    display: none;
}

#customize:checked + #submit {
    display: inline-block;
}

JS フィドルのデモ

参考文献:

于 2013-05-19T16:31:44.283 に答える
0

もちろん、object.style.visibility="hidden"そのために使用できます。

于 2013-05-19T16:11:20.273 に答える
0

CSS を使用して追加できます。<div id="your_box" style="display:none;"></div>最初は非表示でonclick()、属性を次のように変更します。display:block

于 2013-05-19T16:06:57.977 に答える
0

ボックスを隠したままに'visibility: hidden' or 'display: none'し、 onclik プロパティを次のように変更できますvisibility = 'visible';

于 2013-05-19T16:07:31.243 に答える