Javascript 有什么办法可以让html按钮保持按下状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6238314/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Any way to keep an html button pressed?
提问by gerarddp
I have a button <input type="button" name="name" value="value"/>.
Is there any way to keep it visually pressed and unpress it via javascript?
我有一个按钮<input type="button" name="name" value="value"/>。有什么办法可以让它在视觉上保持按下状态并通过 javascript 解压它？
Thanks
谢谢
回答by Brad Christie
I would try CSS and use the border-style inset, personally.
我个人会尝试 CSS 并使用 border-style inset。
<input type="button" value="Inset Border" style="border-style:inset;" />
For a list of different styles, please see this jsFiddle.
有关不同样式的列表，请参阅此 jsFiddle。
回答by ThiefMaster
No, that's not possible.
不，那不可能。
I'd suggest you to use something like the jQuery UI Buttons. They support exactly this behaviour: http://jqueryui.com/demos/button/#checkbox
我建议你使用类似jQuery UI Buttons 的东西。他们完全支持这种行为：http: //jqueryui.com/demos/button/#checkbox
回答by Mohamed
There is no way to do that with javascript.
使用 javascript 无法做到这一点。
But you can use javascript to simulate that effect by adding/removing a css class, or directly editing the css properties you have chosen to use.
但是您可以使用 javascript 通过添加/删除 css 类或直接编辑您选择使用的 css 属性来模拟该效果。
回答by kofifus
toggle the visual state of the button by:
通过以下方式切换按钮的视觉状态：
btn.onclick=function(e) {
this.style.borderStyle = (this.style.borderStyle!=='inset' ? 'inset' : 'outset');
}
when you need to see if it's depressed simply check if btn.style.borderStyle==='inset'
当您需要查看它是否沮丧时，只需检查是否 btn.style.borderStyle==='inset'
回答by Experienced n00b
function pp() {
if(document.getElementById('pBut').innerHTML == 'Pause'){
// do some stuff
document.getElementById('pBut').innerHTML = 'Continue';
document.getElementById('pBut').style.borderStyle = 'inset';
}
else {
// do some other stuff
document.getElementById('pBut').innerHTML = 'Pause';
document.getElementById('pBut').style.borderStyle = 'outset';
}
}<button id="pBut" type="button" onclick="pp()" title="Pause or continue the chapter.">Pause</button>Works for me. Tested With FireFox and Opera, but should be compatible with all browsers.
为我工作。已使用 FireFox 和 Opera 进行测试，但应与所有浏览器兼容。
回答by OuzoPower
Inspired from Brad Christie's answer, a slightly modified example based on an anchor HTML element, which improves the visual aspect by setting a different background and rounded corners:
灵感来自 Brad Christie 的回答，这是一个基于锚定 HTML 元素的稍微修改的示例，它通过设置不同的背景和圆角来改善视觉方面：
<a class="bouton" style="border-width:1px;border-radius:3px;" onclick="javascript:this.style.borderStyle = (this.style.borderStyle!==\'inset\' ? \'inset\' : \'outset\');this.style.background = (this.style.borderStyle!==\'inset\' ? \'\' : \'#ccc\')" value="Details" >…</a>
The CSS description of the button:
按钮的 CSS 描述：
a.bouton {
display:inline-block;
width:40px;
height:18px;
background-image:url('bouton_gris_petit.png');
background-repeat:no-repeat;
border: 1px solid #888;
font-size:11.3px;
color:#666;
cursor:pointer;
text-shadow:#666 0px 0px 0px;
text-align:center;
border-radius:3px;
}
To download the picture of the button: https://i.stack.imgur.com/h1xVV.png
下载按钮图片：https: //i.stack.imgur.com/h1xVV.png
回答by K.B
You can use this document.getElementById("some_id").style.border.
你可以用这个 document.getElementById("some_id").style.border.
<input id="some_id" onTap="change_me()" type="button" name="name" value="value"/>
var button_switch = "on";
function change_me(){
if(button_switch==="on"){
document.getElementById("some_id").style.border = "3px inset rgb(254, 255, 208)";
button_switch = "off";
}else{
document.getElementById("some_id").style.border = "3px outset rgb(254, 255, 208)";
button_switch = "on";
}
}
