blocks|key|877154|text|我会亲自尝试CSS并使用边框风格的inset。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|877155|<input+type="button"+value="Inset+Border"+style="border-style:inset;"+/>|code-block|syntax|javascript|877156|有关不同样式的列表，请参阅this+jsFiddle。|877157|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/bradchristie/4mUsP/1/^0|H|5|0|0|D|D|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>I would try CSS and use the border-style <code>inset</code>, personally.</p>

<pre><code>&lt;input type="button" value="Inset Border" style="border-style:inset;" /&gt;
</code></pre>

<p>For a list of different styles, please see <a href="http://jsfiddle.net/bradchristie/4mUsP/1/" rel="noreferrer">this jsFiddle</a>.</p>


blocks|key|877084|text|不，这不可能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|877085|我建议你使用像jQuery+UI+Buttons这样的东西。它们完全支持这种行为：http://jqueryui.com/demos/button/#checkbox|offset|length|877086|entityMap|0|LINK|mutability|MUTABLE|url|http://jqueryui.com/demos/button/|1|http://jqueryui.com/demos/button/#checkbox^0|0|7|H|0|15|16|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]|$D|U|E|V|1|W]]|A|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]|N|$5|I|J|K|A|$L|O]]]]

<p>No, that's not possible.</p>

<p>I'd suggest you to use something like the <a href="http://jqueryui.com/demos/button/" rel="noreferrer">jQuery UI Buttons</a>. They support exactly this behaviour: <a href="http://jqueryui.com/demos/button/#checkbox" rel="noreferrer">http://jqueryui.com/demos/button/#checkbox</a></p>


blocks|key|877121|text|使用javascript无法做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|877122|但是您可以使用javascript通过添加/删除css类或直接编辑您选择使用的css属性来模拟该效果。|877123|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>There is no way to do that with javascript. </p>

<p>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.</p>


blocks|key|877212|text|通过以下方式切换按钮的可视状态：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|877213|btn.onclick=function(e)+{
++++this.style.borderStyle+=+(this.style.borderStyle!=='inset'+?+'inset'+:+'outset');+
}|code-block|syntax|javascript|877214|当您需要查看它是否被抑制时，只需检查btn.style.borderStyle==='inset'|offset|length|style|CODE|877215|entityMap^0|0|0|I|V|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>toggle the visual state of the button by:</p>

<pre><code>btn.onclick=function(e) {
    this.style.borderStyle = (this.style.borderStyle!=='inset' ? 'inset' : 'outset'); 
}
</code></pre>

<p>when you need to see if it's depressed simply check if <code>btn.style.borderStyle==='inset'</code></p>


blocks|key|660222|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|660223|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';
++++}
}|code-block|syntax|javascript|660224|<button+id="pBut"+type="button"+onclick="pp()"+title="Pause+or+continue+the+chapter.">Pause</button>|660225|660226|这对我很有效。使用FireFox和Opera进行了测试，但应该与所有浏览器兼容。|660227|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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';
    }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button id="pBut" type="button" onclick="pp()" title="Pause or continue the chapter."&gt;Pause&lt;/button&gt;</code></pre>
</div>
</div>
</p>

<p>Works for me. Tested With FireFox and Opera, but should be compatible with all browsers.</p>


blocks|key|877177|text|您可以使用此document.getElementById("some_id").style.border.|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|877178|<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";
++++}+
}|code-block|syntax|javascript|877179|entityMap^0|6|1C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>You can use this <code>document.getElementById("some_id").style.border.</code> </p>

<pre><code>&lt;input id="some_id" onTap="change_me()" type="button" name="name" value="value"/&gt;

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";
    } 
}
</code></pre>


blocks|key|660156|text|灵感来自布拉德·克里斯蒂的回答，这是一个基于锚点HTML元素的略微修改的示例，它通过设置不同的背景和圆角来改善视觉方面：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|660157|<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"+>&hellip;</a>|code-block|syntax|javascript|660158|按钮的CSS说明：|660159|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;
}+|660160|下载按钮图片：https://i.stack.imgur.com/h1xVV.png|offset|length|660161|entityMap|0|LINK|mutability|MUTABLE|url|https://i.stack.imgur.com/h1xVV.png^0|0|0|0|0|7|Z|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

<p>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:</p>

<pre><code>&lt;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" &gt;&amp;hellip;&lt;/a&gt;
</code></pre>

<p>The CSS description of the button:</p>

<pre><code>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;
} 
</code></pre>

<p>To download the picture of the button: <a href="https://i.stack.imgur.com/h1xVV.png" rel="nofollow noreferrer">https://i.stack.imgur.com/h1xVV.png</a></p>


<p>I have a button <code>&lt;input type="button" name="name" value="value"/&gt;</code>. 
Is there any way to keep it visually pressed and unpress it via javascript?</p>

<p>Thanks</p>


Any way to keep an html button pressed?

我有一个按键<input type="button" name="name" value="value"/>。有没有办法通过javascript保持视觉上的按压和解压呢？谢谢

问有什么方法可以让html按钮保持按下吗？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有什么方法可以让html按钮保持按下吗？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问有什么方法可以让html按钮保持按下吗？
EN