为对象分配/取消分配类

时间:2014-03-14 17:13:16

标签: javascript html css dom

我正在尝试为某些对象分配/取消分配类,然后设置某些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结构的错误处理。

2 个答案:

答案 0 :(得分:2)

那个特定的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,更改变量是不够的。

答案 1 :(得分:1)

使用.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代替。