js和css分离1

最新推荐文章于 2024-04-19 05:03:48 发布

尚云峰

最新推荐文章于 2024-04-19 05:03:48 发布

阅读量241

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/u011165335/article/details/86652758

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--样式跟行为跟结构分离
			js可以通过class来控制样式
			而class有css来维护
		-->
		<link rel="stylesheet" type="text/css" href="../../css/stripeTable.css"/>
	</head>
	<body>

		<table id="tab-id">
			<!--caption 元素定义表格标题。 紧随table的后面-->
			<caption>表格的标题</caption>
			<tr>
				<th>姓名</th>
				<th>生日</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>长大1</td>
				<td>19920603</td>
				<td>15</td>
			</tr>
			<tr>
				<td>长大2</td>
				<td>19920603</td>
				<td>16</td>
			</tr>
			<tr>
				<td>长大3</td>
				<td>19920603</td>
				<td>17</td>
			</tr>
			<tr>
				<td>长大4</td>
				<td>19920603</td>
				<td>18</td>
			</tr>
		</table>
		
		<script src="../../js/stripeTale.js"></script>
	</body>
</html>

CSS文件:

stripeTable.css

/*tr:nth-child(odd){
	background-color: aquamarine;
}
tr:nth-child(1){
	background-color: white;
}*/

table{
	border-collapse: collapse;
}

th,
td{
	border: 1px solid;
}

.classA{
	font-weight: bold;
}

.NclassA{
	font-weight: normal;
}

.classB{
	font-family: "arial narrow";
}

.classC{
	background-color: burlywood;
}

JS文件:

stripeTale.js
//可以通过传入class来控制样式,这样充分的将样式表,js分离
addOnloadEvent(tableStyle('classC'));
addOnloadEvent(onmouseTable('classA'));

function tableStyle(className) {
	//获取所有的table
	var tables = document.getElementsByTagName('table');
	for(var i = 0; i < tables.length; i++) {
		var flag = false;
		var rows = tables[i].getElementsByTagName('tr');
		for(var j = 0; j < rows.length; j++) {
			if(flag) {
				//rows[j].style.backgroundColor='red';
				addClass(rows[j], className);
				flag = false;
			} else {
				flag = true;
			}
		}

	}
}

//为table添加事件
//对于这种反复触发的事件,最好是addclass和removeClass结合使用
function onmouseTable(className) {
	var tabs = document.getElementsByTagName('table');
	for(var i = 0; i < tabs.length; i++) {
		var rows = tabs[i].getElementsByTagName('tr');
		//去掉第一行
		for(var j = 1; j < rows.length; j++) {
			rows[j].onmouseover = function() {
				//this.style.fontWeight='bold';
				//this.setAttribute('class','classA');//方式1
				addClass(this, className); //方式2
			}

			rows[j].onmouseout = function() {
				//this.style.fontWeight='normal';
				removeClass(this, className);
			}
		}

	}
}

//添加class  这个适合一次性触发的事件
function addClass(elem, className) {
	//	debugger;
	if(!elem) return null;
	//如果该元素上面已经存在class,那么追加
	if(elem.className) {
		elem.className += ' ' + className;
	} else {
		elem.className = className;
	}

}

//删除class
function removeClass(elem, className) {
	if(!elem) return false;
	var currClassName = elem.className;
	if(currClassName) {
		elem.className = currClassName.replace(className, '');
	} else {
		return false;
	}
}

function addOnloadEvent(func) {
	var oldOnload = window.onload;

	//如果没有绑定方法
	if(typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldOnload();
			func();
		}
	}
}

尚云峰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js和css分离1

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;!--样式跟行为跟结构分离 js可以通过class来控制样式而class有css来维护 --&gt; &lt;link
复制链接

扫一扫