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;
}

所以，如果让我说我使用改变元素类的两个按钮，我可以打开和关闭按钮，但是一旦我使用其他按钮来直接操作显示属性，我不能再使用更改className按钮来切换它们。

所以我想知道为什么会这样？不应该更改类名清除所有内容并重新分配css指令吗？

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

Answer 1

内联样式（例如由JS设置的样式或样式=“”块中的样式）具有比CSS类更高的优先级。除非您在样式上使用!important来覆盖它，否则它们将始终按照设计优先使用内联样式。

Answer 2

您的课程仍在改变，但是当您更改显示时，它会覆盖课程中的css规则。所以你再次将它改为回到特定类具有

的规则

添加

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。

在通过javascript操作其样式后更改元素的css类不起作用

4 个答案: