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控制样式的诸多方法相关推荐

html如何控制图片自动放缩,如何用js控制图片放大缩小
js控制图片放大缩小的效果,可以通过JavaScript的width和height属性来实现.其属性可以实现按比例放大和缩小图像尺寸的功能. 在前面的文章中,也为大家介绍了JS获取图片当前宽高和JS获 ...
Vue.js 学习笔记七控制样式
Vue.js可以灵活的控制样式我们首先随便写2个样式 <style>.divCss {background-color: green;width:400px;height:400px;} ...
Js控制CSS切换样式表实现页面风格切换
看到别人网站都有一个无刷新切换风格的功能,自己很喜欢,但始终没找到方法,后来看了网上的教程,总算自己做出来了,下面只说关键步骤,相信通过这篇教程,你会搞定这个功能. 首先,我们需要自己写好几种CSS风 ...
js控制div属性隐藏方法
原文详解:js控制div属性隐藏方法如题:编写html时如何用js控制div的显示和隐藏. 假定页面展示内容如下: 1.点击触发事件: <div><button class=&qu ...
html元素隐藏js 控制,JS控制HTML元素的显示和隐藏的两种方法
JS控制HTML元素的显示和隐藏的两种方法利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一 ...
js 控制页面跳转的5种方法
js 控制页面跳转的5种方法编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的History.back是回退一页Histiory.go(1)前进一页Histo ...
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法在添加完之后,可以使用 $.parser.parse();这个方法进行处理: (1) 对整个页面重新渲染: $.parser ...
JS控制CSS样式语法对照
CSS与JS紧密配合,为我们的页面增添了很多别致的效果.为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性. 例如常用的关闭某个漂浮的广告显示:document.g ...
鸿蒙系统分享----软件驱动使用JS控制LED灯实验方法
第一:鸿蒙系统环境搭建方法 1.BearPi-HM Micro ubuntu 镜像下载和虚拟机VMware Workstation 安装(虚拟机环境) 2.VS Code的安装和安装RaiDrive工 ...

Js控制样式的诸多方法

Js控制样式的诸多方法相关推荐

最新文章

热门文章