关注前端开发微信微信号web007007

JS实现动态添加类名

作者 管理员 发布时间 2012-07-05 13:35 文章分类 JavaScript 文章评论 1条评论 阅读次数

今天遇到这样的一个问题,对于下面这个表格,要实现类似的效果,如果去做呢。忽略IE6,直接对td使用hover伪类,但是达不到这样的效果,只能在指上第一行的时候,前面的大单元格产生效果,要让在第二行,第三行都产生效果,只能使用js。

JS实现动态添加类名--WEB前端开发网

动态增加类名的js函数如下


function addClass(id,className){
var element = document.getElementById(id);
if(element.className == ""){
element.className = className;
}else{
element.className += " "+className;
}
}

在HTML中td上面增加出发条件

<tr onmouseout=”clearClass(‘biaoyan’)”>

当然还要有清除类名的函数(见demo),这样就可以实现上面这种效果了。

最终结果预览 demo

本文固定链接: http://www.web92.net/526.html | WEB前端开发

该日志由 于2012年07月05日发表在 JavaScript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: JS实现动态添加类名 | WEB前端开发