javascript - 通过 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 设置的样式，或 style="" block 中的样式)比 CSS 类具有更高的优先级。根据设计，它们始终会胜过内联样式，除非您在样式上使用 !important 来覆盖它。