zoukankan      html  css  js  c++  java
  • 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"});

  • 相关阅读:
    Backbone的 listenTo 和 on
    前端工作流程
    Zepto源码笔记(三)
    Zepto源码笔记(二)
    Zepto源码笔记(一)
    Canvas基础学习(一)——实现简单时钟显示
    常用排序算法之JavaScript实现
    NodeJS学习笔记(一)——搭建开发框架Express,实现Web网站登录验证
    浏览器基础知识
    学习Vim 全图解释
  • 原文地址:https://www.cnblogs.com/ken-admin/p/6405770.html
Copyright © 2011-2022 走看看