Js控制样式的诸多方法

function TableCss(options){

//如果没参数,就退出

        if(arguments.length < 1 || !document.getElementById(options.tableName) ) { return ;}

//参数及默认参数

        var options = {

                tableName : options.tableName,

                evenClass : options.evenClass || "tr_even",

                oddClass   : options.oddClass || "tr_odd",

                clickClass  : options.clickClass || "tr_click",

                hoverClass: options.hoverClass || "tr_hover"

                }

//根据ID找到表格元素

        var tableName = document.getElementById(options.tableName);

        var tr = tableName.getElementsByTagName("tr");

//对TR元素循环设置

        for(var i=0, len=tr.length; i<len; i++){

//用了闭包

                (function(k){

                        //设置奇偶行样式          

                        tr[k].className = (k%2==0)? options.oddClass : options.evenClass;

//点击样式

                        tr[k].onclick = function(){

                                if (tr[k].className == options.clickClass){

                                        tr[k].className = (k%2==0)? options.oddClass : options.evenClass;

                                }

                                else {

                                        tr[k].className = options.clickClass;

                                }

                        }

                        //鼠标HOVER样式,如果已经是点击样式,则不变化

                        tr[k].onmouseover = function(){

                                if(tr[k].className == options.clickClass ){ return false;}

                                else { tr[k].className = options.hoverClass;}

                        }

                        tr[k].onmouseout = function(){  

                                if(tr[k].className == options.clickClass){ return false;}

                                else {  

tr[k].className = (k%2==0)? options.oddClass : options.evenClass;

}

                        }

                        

                        

                 })(i)

        }

}

//调用

TableCss({tableName:"tb1"});

转载于:https://www.cnblogs.com/ken-admin/p/6405770.html

总结

以上是生活随笔为你收集整理的Js控制样式的诸多方法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。