javascript - 为对象分配/取消分配类

Question

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

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

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

但是，我收到如下错误:

"Cannot read property 'innerText' of null."

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

"Cannot read property 'indexof' of undefined."

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 结构的不正确处理。

Answer 1

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

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

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

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