我正在尝试使用以下代码隐藏和显示框。默认显示此工作但框。我可以隐藏该框并仅在点击时显示吗?目前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>
答案 0 :(得分: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行,当然一旦它隐藏了你就再也看不到了..;)
答案 1 :(得分:1)
在样式表或内联样式中添加以下内容
style="display: none;"
答案 2 :(得分:0)
你可以使用CSS,并添加:<div id="your_box" style="display:none;"></div>
最初它将被隐藏,onclick()
将属性更改为display:block
答案 3 :(得分:0)
您可以使用'visibility: hidden' or 'display: none'
隐藏该框,然后点击将该属性更改为visibility = 'visible';
答案 4 :(得分:0)
当然,您可以使用object.style.visibility="hidden"
来执行此操作。
答案 5 :(得分: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;
}
参考文献: