通过javascript操作元素样式后更改元素的css类不会'；行不通

html:

css:

因此，如果我使用两个按钮来更改元素的类，我可以打开和关闭按钮，但是一旦我使用其他按钮来直接操作display属性，我就不能再使用更改类名按钮来切换它们了

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

---

您的类仍在更改，但更改显示时会覆盖类中的css规则。因此，您必须再次将其更改回特定类具有的规则

加

到

show（）

函数

及

到

hide（）

函数

将您的代码更改为此（JS）：

并将这两个类添加到CSS中：

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

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

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

使用

document.getElementById（“myinput”）.style.display=“block”内联样式已添加到输入，在删除包含此样式的类时无法删除它。内联样式必须单独删除

内联样式（如JS设置的样式，或style=”“块中的样式）的优先级高于CSS类。除非您使用
，否则它们在设计上总是胜过内联样式！重要信息
在样式上覆盖它。
您正在使用jQuery，为什么不一直使用它：

.none
{
    display:none;
}

.block
{
    display:block;
}

不需要更改JavaScript的类名，也不需要CSS

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

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

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

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

.none
{
    display:none;
}

.block
{
    display:block;
}

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