通過JavaScript操縱樣式後更改CSS類的元素不起作用

Question

HTML：

<input id="myinput" class="cinput" type="image" src="http://www.foodwater.org.au/images/triple-spiral-3-small-button.jpg"/> 
<br><br><br><br> 

<button id="s">set to visible class</button> 
<button id="h">set to hidden class</button> 
<button id="db">set display:block</button> 
<button id="dn">set display:none</button> 

的javascript：

$("#s").on("click", show); 
$("#h").on("click", hide); 
$("#db").on("click", db); 
$("#dn").on("click", dn); 

function show() { 
    document.getElementById("myinput").className = "cinputvis"; 
} 

function hide() { 
    document.getElementById("myinput").className = "cinput"; 
} 

function db() { 
    document.getElementById("myinput").style.display = "block"; 
} 

function dn() { 
    document.getElementById("myinput").style.display = "none"; 
} 

CSS：

.cinput { 
    position: absolute; 
    display: none; 
    top: 0px; 
    left 0px; 
    margin: 0px; 
    border: 1px solid black; 
    cursor: pointer; 
} 

.cinputvis { 
    position: absolute; 
    display: block; 
    top: 0px; 
    left 0px; 
    margin: 0px; 
    border: 1px solid black; 
    cursor: pointer; 
} 

所以，如果比方說，我使用兩個按鈕來改變元素的類，我可以打開和關閉按鈕，但是一旦我使用其他按鈕來直接操縱display屬性，我不能再使用className按鈕的切換來切換它們。

所以我想知道爲什麼會發生這種情況？不應該改變類名清除所有內容並重新分配css指令？

http://jsfiddle.net/5v8ub/6/

Answer 1

內聯樣式（如那些由JS設置，或者那些在樣式=「」塊）具有比CSS類更高的優先級。除非您在樣式上使用!important來覆蓋它，否則它們將始終按設計使用內聯樣式。

Answer 2

你的類仍在改變，但是當你改變顯示它覆蓋從類中的CSS規則。所以，你必須tochange再次回到那個特定的類有規則

添加

document.getElementById("myinput").style.display = "block"; 

到show()功能

和

document.getElementById("myinput").style.display = "none"; 

到hide()功能

DEMO

Answer 3

你的代碼改成這樣（JS）：

function db() { 
    document.getElementById("myinput").className = "block"; 
} 

function dn() { 
    document.getElementById("myinput").className = "none"; 
} 

而且這兩個類添加到CSS：

.none 
{ 
    display:none; 
} 

.block 
{ 
    display:block; 
} 

隨着document.getElementById("myinput").style.display = "block";內嵌樣式加入到輸入和它不能在刪除包含此樣式的類時移除。內聯樣式必須單獨刪除。

fiddle

Answer 4

您正在使用jQuery，爲什麼不將所有的方式：

$("#s, #db").on("click", function() { 
$('#myinput').show(); 
}); 
$("#h, #dn").on("click", function() { 
$('#myinput').hide(); 
}); 

無需類名稱改變的JavaScript，不需要CSS。