为对象分配/取消分配类答案

【问题标题】：Assigning / Unassigning classes to objects为对象分配/取消分配类
【发布时间】：2014-04-20 03:12:43
【问题描述】：

我正在尝试为某些对象分配/取消分配类，然后设置某些 CSS 样式，例如活动链接的类，将它们的字体样式设置为“斜体”。

我围绕该功能包装了一个函数，因此我可以在每个具有每个类名的对象上调用它。该函数检查类名是否已经存在于类属性中。如果不是这样，它会附加类名。

以下是一个“输入”，如果父 div 悬停，则应将颜色从灰色（非活动）更改为黑色（活动），触发“overSearch()”。在该函数中，“assignClass()”被调用，超越了“输入”对象和所需的类名。

但是，我收到如下错误：

“无法读取 null 的属性 'innerText'。”

如果我删除“.innerText”，它会说：

“无法读取未定义的属性 'indexof'。”

HTML

<input id="searchbar" type="text" placeholder="http://" spellcheck="false"/>

JAVASCRIPT

var srchBar = document.getElementById('searchbar');

function assignClass(obj, classStr){
    var cls = obj.getAttribute('class').innerText;
    if ( cls.indexof(classStr) == (-1) ) {
        cls += (' ' + classStr);
    }
}

function overSearch(){
    assignClass(srchBar, 'searchActive');
}

CSS

.searchActive {
    color: black !important;
}

我解释错误的尝试是“assignClass()”无法读取“class”属性，因为它（最初）为空。
其他错误来源可能是对 DOM 结构的错误处理。

【问题讨论】：

标签： javascript html css dom

【解决方案1】：

嗯，那个特定的 DOM 节点没有 class 属性，所以 obj.getAttribute('class') 将返回 null，访问其上的属性会抛出异常。

改为使用 DOM 元素的 .className property，它始终存在。几乎所有任务都不需要处理属性节点。

function addClass(el, classStr){
    var cls = el.className
    if (cls.indexof(classStr) == -1)
        el.className = cls + ' ' + classStr;
}

注意cls 是一个字符串变量，而不是指向某个属性的指针。您需要显式分配给 DOM，仅更改变量是不够的。

【讨论】：

【解决方案2】：

使用.classList

var srchBar = document.getElementById('searchbar');

function assignClass(obj, classStr){
    obj.classList.add(classStr);
}

function overSearch(){
    assignClass(srchBar, 'searchActive');
}

http://jsfiddle.net/NicoO/W7MhL/

如您所见，您也可以直接删除自己的函数并使用纯 js。

【讨论】：