JS改变元素的类答案

【问题标题】：JS Change class of elementJS改变元素的类
【发布时间】：2013-05-18 21:09:03
【问题描述】：

我要做的就是在点击元素时按 ID 切换元素的类。

<script>

function selectLoad(id)
{
    if(document.getElementById(id).className == "load") {
        document.getElementById(id).className = "loadSelected";
    } else {
        document.getElementById(id).className = "load";
    }
}

</script>

<div class="load" id=" ... set by PHP per element ... " onclick="selectLoad(this)">

这会返回一个错误...

未捕获的类型错误：无法读取 null 的属性“className”

所以我猜它不喜欢有条件的。

我是 JS 新手，需要帮助，在此先感谢。

【问题讨论】：

Check it out
document.getElementById(id) 返回空值。确保您将正确的 id 传递给 setLoad
另外，将getElementsById的返回值保存在一个var中，你会浪费很多时间在dom中搜索一个元素
我猜“selectLoad(this)”可能会给你带来麻烦。使用 php 更容易设置 id：'"selectLoad(\''.php_var.'\');"

标签： javascript

【解决方案1】：

您传递的是 dom 元素本身（使用 this），而不是 id。

您应该将代码更改为

function selectLoad(element)
{
    if (element.className == "load") {
        element.className = "loadSelected";
    } else {
        element.className = "load";
    }
}

【讨论】：

【解决方案2】：

我认为您传递的 id 不存在于 dom 中。在执行您的 javascript 之前是否已加载 dom？将脚本移动到页面底部的 html 结束标记之前

编辑：在错误下方的 cmets 中进行以下讨论是这一行：

<div class="load" id=" ... set by PHP per element ... " onclick="selectLoad(this)">

它应该是

<div class="load" id=" ... set by PHP per element ... " onclick="selectLoad(this.id)">

【讨论】：

OP 根本没有传递 ID。该调用传入一个 DOM 元素。
是的，他是。在 selectElementById(id) 中，id 是一个 id！问题是 id 不存在于 dom 中的元素上
"在你的 javascript 执行之前加载了 dom 吗？"如果您阅读过 HTML，就会知道该脚本被用作 onclick 回调，这意味着 DOM 肯定已经加载。
我不是在谈论 document.getElementById，我指的是 OP 在哪里调用 selectLoad(this)，它将 DOM 元素作为参数传递，因为 this 指的是 div。
你应该使用this.id而不是this.getAttribute('id')，因为它更简洁。

【解决方案3】：

你的代码不安全，因为你没有检查你是否有给定id的DOM元素

这就是您收到错误消息的原因：Cannot read property 'className' of null

if(document.getElementById(id)) {
    // ... do something and do not go further.
    return;
}

当您调用selectLoad 时，问题是通过this。此时，this 是 DOM 元素，而不是您期望的字符串：... set by PHP per element ...。所以你必须相应地更改代码。

【讨论】：