任何方式來保持一個HTML按鈕被按下？

我有一個按鈕<input type="button" name="name" value="value"/>。有沒有什麼辦法來保持它的視覺壓力，並通過JavaScript解壓縮？任何方式來保持一個HTML按鈕被按下？

謝謝

2011-06-04 gerarddp

你爲什麼要這麼做？ – Oded 2011-06-04 17:32:42

@Oded：我想他會想用它作爲切換按鈕。我猜想用單選按鈕是可以的，但那會很麻煩。 – Bojangles 2011-06-04 17:57:39

我正面臨類似的問題。我有一個圖書館，我正在建立一個用戶界面，但按鈕不像jQuery切換按鈕（這是我需要的）。我不知道如何去纏繞兩個庫（我使用的和jQuery UI）。有什麼建議嗎？ – user65165 2014-07-10 16:03:06

我會嘗試CSS並親自使用邊框樣式inset。

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

有關不同風格的列表，請參閱this jsFiddle。

來源

2011-06-04 17:40:51

我也想過CSS技巧，但我認爲他正在談論按下/未按下按鈕表示的開/關按鈕。 @ ThiefMaster的建議將更好地滿足需求。 – TheVillageIdiot 2011-06-04 18:05:32

@TheVillageIdiot：點擊應用課程是不可行的？它只需要按下，實際上並不是必須的。 ;-) – 2011-06-04 18:07:01

這適用於JavaScript：「pressed pressed」.style.borderStyle =「inset」。下面是您可以在JavaScript中設置的屬性列表：https：//developer.mozilla。org/en-US/docs/Web/CSS/CSS_Properties_Reference – kermit 2015-09-25 01:15:40

不，這是不可能的。

我建議你使用類似jQuery UI Buttons的東西。他們支持這種行爲：http://jqueryui.com/demos/button/#checkbox

來源

2011-06-04 17:34:56 ThiefMaster

有沒有辦法做到這一點的JavaScript。

但是，您可以使用javascript通過添加/刪除css類或直接編輯您選擇使用的css屬性來模擬該效果。

來源

2011-06-04 17:35:38 Mohamed

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

來源

2016-06-09 02:23:27

切換的按鈕的視覺狀態：

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

當你需要看它是否只是鬱悶檢查btn.style.borderStyle==='inset'

來源

2016-08-16 05:40:50 kofifus

從布拉德·克里斯蒂的回答啓發，略加修改例如基於在錨點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

來源

2017-04-17 16:01:30 OuzoPower

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測試，但應與所有瀏覽器兼容。

來源

2017-06-02 00:45:00

非常感謝@nonzaprej的編輯。現在它更有意義。 – 2017-06-03 02:28:08

任何方式來保持一個HTML按鈕被按下？

回答

相關問題