只有JavaScript和CSS的元素更改设备

have element change appreance with only javascript and CSS

本文关键字：元素 JavaScript CSS 只有      更新时间：2023-09-26

试图通过在单击复选框时更改某些元素的背景来使我的网页更加动态。我正在尝试通过类更改和 CSS 工作表来做到这一点。我有以下内容，它踢出了一个错误，我的点击函数没有定义(在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);
}

这里有几件事。首先，你的css选择器不太正确。事实上，我建议将类名设置为"选择"或"未选择"，然后使用该类选择 tr 元素。

<tr class='notchosen'>

然后你可以从css定位它(这可能是最初的意图(

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

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

onclick='handleClick(this)'

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

if (currentRow.className == "chosen")
{
 currentRow.className = "notchosen";
}
else
{
 currentRow.className = "chosen";
}
相关文章：