Question

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

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

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

但是，我收到的错误如下：

“无法读取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'属性，因为它是null（最初）。
其他错误源可能是对DOM结构的错误处理。

Answer 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，更改变量是不够的。

Answer 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代替。

为对象分配/取消分配类

2 个答案: