javascript - 当 JavaScript 更改元素属性时 CSS 是否应该更新？

Question

我有一些按钮，在 javascript 中我做了一些操作。根据用户点击的内容，按钮将被启用和禁用。

逻辑和启用/禁用效果很好。但是我的 CSS 没有更新禁用按钮的外观。我想我的问题是，它应该自动更新吗？还是我需要以某种方式处理？

如果相关，我正在使用 ASP.NET MVC。

我只是将它添加到我的视图顶部（用于测试）：

<style>
   button[disabled] {
       background: green;
   }
</style>

和一段 javascript ：

function changeNameEnabled(enabled) {
    document.getElementsByName("FullNameExact")[0].disabled = !enabled;
}

示例按钮：

<button onclick="nameClick(this)" name="FullNameExact" style="height:20%;width:75%;top:5%;left:13%;margin-bottom:5%">FULL NAME EXACT</button>

我可以在浏览器中看到按钮获得disabled属性，并且不可点击

score 0 · Accepted Answer

禁用按钮时为什么不给按钮添加一个类？添加类时将自动应用 CSS。

document.getElementById("MyElement").className = "MyClass";

一般来说，为了管理 javascript 中的类： Change an element's class with JavaScript

score 0 · Accepted Answer

我发现出了什么问题。看看这个 jsFiddle：http: //jsfiddle.net/6jht2/1/

我让你的代码在小提琴中可用。您正在做的是通过在 onclick 属性中使用 this 将 DOM 元素传递给函数：

<button onclick="nameClick(this)" name="FullNameExact" style="height:20%;width:75%;top:5%;left:13%;margin-bottom:5%">FULL NAME EXACT</button>

所以当函数被调用时，它会尝试反转一个 DOM 元素。和错误。

即使您将disabled属性设置为布尔值，它也不起作用。您需要在布尔值或任何字符串上使用 toString，甚至是“a”或“foo”。

在这里一切正常。希望它会有所帮助。

提示：不要使用 onclick 属性。相反，使用 DOM 事件处理。

score -3 · Accepted Answer

-3

button[disabled] 不起作用，最好添加一些 .disabled 类，然后它会起作用。

于 2013-08-30T15:14:45.357 回答

3 回答 3