2011-06-04 303 views
17

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

謝謝

+3

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

+6

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

+0

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

回答

17

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

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

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

+0

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

+3

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

+1

這適用於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

3

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

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

0

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

切換的按鈕的視覺狀態:

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

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

0

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

0

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

+1

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

相關問題