javascript - 仅使用 javascript 和 CSS 改变元素外观

Question

尝试通过单击复选框时更改某些元素的背景来使我的网页更加动态。我正在尝试通过类更改和 CSS 表来做到这一点。我有以下错误，我的 onclick 函数未定义(在 IE9 中)。更重要的是，如果我只更改 CSS 文件中具有不同类的对象的类，网页是否会更新。如果这不起作用，还有什么更好的选择？

我的元素和函数

更新 我按照许多人的建议更新了我的 HTML 和 CSS 文件。我的网页仍然没有任何变化，但控制台声称我从 onclick 事件调用的函数未定义，这有点奇怪，因为它是。这种用于脚本的类型是否也属于 HTML，还是我应该将其拉出并放入一个单独的文件中。我想因为它正在创建它属于主 html 的元素。是否有更简洁、更紧凑的方式来完成此操作而不会使我的主屏幕 html 变大？

<tr class= 'tr.notchosen'><td><input type='checkbox' onclick='handleClick(this.id)'/></td></tr> 

function handleClick(cb) {

     var currentColumn = cb.parentNode
     var currentRow = currentColumn.parentNode
     if (currentRow.className === "chosen")
     {
     currentRow.className = "notchosen";
     }
     else
     {
     currentRow.className = "chosen";
     }
    }

我的css文件如下

tr.chosen
{
background-color:rgba(255,223,0,0.75);
}
tr.notchosen
{
background-color:rgba(255,223,0,0);
}

Answer 1

这里发生了几件事。首先，您的 css 选择器不太正确。事实上，我建议将类名设置为“选择”或“未选择”，然后选择具有该类的 tr 元素。

<tr class='notchosen'>

然后你可以从css中定位它(这可能是初衷)

tr.notchosen
{
 background-color:rgba(255,223,0,0);
}

此外，虽然我不建议使用内联 javascript，但使用您的示例，如果您想使用该元素，您应该传递 this 而不是 this.id会传递一个字符串。

onclick='handleClick(this)'

最后一部分是将您的 javascript 与类名更改同步

if (currentRow.className == "chosen")
{
 currentRow.className = "notchosen";
}
else
{
 currentRow.className = "chosen";
}