Question

我有一个按钮<input type="button" name="name" value="value"/>。有没有什么方法可以通过javascript保持它的视觉压缩和解压缩？

由于

Answer 1

我会尝试CSS并亲自使用边框式inset。

<input type="button" value="Inset Border" style="border-style:inset;" />

有关不同风格的列表，请参阅this jsFiddle。

Answer 2

不，那是不可能的。

我建议您使用类似jQuery UI Buttons的内容。他们完全支持这种行为：http://jqueryui.com/demos/button/#checkbox

Answer 3

使用javascript无法做到这一点。

但您可以使用javascript通过添加/删除css类来模拟该效果，或直接编辑您选择使用的css属性。

Answer 4

您可以使用此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";
    } 
}

Answer 5

灵感来自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" >&hellip;</a>

按钮的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;
}

下载按钮的图片：https://i.stack.imgur.com/h1xVV.png

Answer 6

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>

适合我。使用FireFox和Opera测试，但应与所有浏览器兼容。

有什么方法可以按下html按钮吗？

6 个答案: