I am trying to hide and show box using following code. This work but box is displayed by default. Can I hide the box and only display on click? Currently onclick works to hide the box.
<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>
1) Sure just add a style or css class to the object.
<input type="button" style="display:none" value="Customize" onclick="display()">
2) Just exact the element from the event:
function display(evnt) {
var obj = evnt.target;
obj.style.display = (obj.style.display === 'none') ? 'block' : 'none'; // (cond) ? <do> : <else>
}
jsFiddle example working example (ignore the getDocument line and of course once it hidden you can't see it anymore..;)
在样式表或内联样式中添加以下内容
style="display: none;"
您可以使用CSS,并添加: <div id="your_box" style="display:none;"></div>
最初它将被隐藏并且onclick()
更改要display:block
的属性display:block
您可以使用'visibility: hidden' or 'display: none'
框,然后onclik将属性更改为visibility = 'visible';
当然,你可以使用object.style.visibility="hidden"
来做到这一点。
It is, of course, possible to do this without JavaScript (albeit the HTML becomes a little more complex, and relies upon support for the :checked
pseudo-selector. Given the HTML:
<form>
<label class="button" for="customize">Customize</label>
<input type="checkbox" id="customize" />
<input id="submit" />
</form>
And the CSS:
label.button {
padding: 0.2em 0.4em;
-webkit-appearance: button;
}
#customize {
display: none;
}
#customize + #submit {
display: none;
}
#customize:checked + #submit {
display: inline-block;
}
References:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.