js隔行换色+js控制css伪代码

1、方法1：

参考：https://blog.csdn.net/qq_37796017/article/details/78003248

<script>
            window.onload = function(){
                //1.获取表格
                var tblEle = document.getElementById("tbl");
                //2.获取表格中tbody里面的行数(长度)
                var len = tblEle.tBodies[0].rows.length;
                //alert(len);
                //3.对tbody里面的行进行遍历
                for(var i=0;i<len;i++){
                    if(i%2==0){
                        //4.对偶数行设置背景颜色
                        tblEle.tBodies[0].rows[i].style.backgroundColor="#ffffff";
                    }else{
                        //5.对奇数行设置背景颜色
                        tblEle.tBodies[0].rows[i].style.backgroundColor="#CCCCCC";
                    }
                }
            }
</script>

方法2：使用纯css进行隔行换色

参考：https://www.360kuai.com/pc/9ab661feb956c305a?cota=4&tj_url=xz&sign=360_57c3bbd1&refer_scene=so_1

<style type="text/css">
//奇数行
table tr:nth-child(odd){

background: #ccc;

}
//偶数行
table tr:nth-child(even){

background: #fff;

}
</style>

 2、

参考：https://www.jb51.net/article/123155.htm

function changeThemes(){ //换肤
        var optskin=document.getElementById("skin"); 
            var Id = optskin.options[optskin.selectedIndex].value; //找到input的ID
            stylesheet.href='themes/'+Id+'.css'; //更换link引用的css文件地址
            saveCookie("Id",Id); //将点击事件存放在浏览器的cookie记录里
            document.styleSheets[1].addRule('.chk_3:checked + label:after','background:'+Id);
    //主题
    var stylesheet=document.getElementById('themeFile');
    var themeId=getCookie('Id');//读取cookies记录
    if(themeId!=null){ //判断cookies记录是否存在
        console.log(themeId);
        stylesheet.href='themes/'+themeId+'.css'; //若存在就选择用户点击的主题
        document.styleSheets[1].addRule('.chk_3:checked + label:after','background:'+themeId);
    }else{
        document.styleSheets[1].addRule('.chk_3:checked + label:after','background:gray');
        stylesheet.href='themes/gray.css';//不存在就默认为红色
    }