*********
通过DOM来设置样式案例2：
PS：这边为什么要用js来修改呢，而不用CSS？
因为假如我们用CSS来设置样式，则必须使用高级的选择器，但是有些浏览器是不支持的；
假如为相应的行加上CLASS也是可以完成的，但是当我们要改变表格的行和列的时候，这时就得
为新添加的行和列手动添加class，所以这样是非常不灵活的，为此我们可以采用JS DOM来解决；
JS DOM擅长这类重复性灵活的样式改变；
1.通过DOM来改变表格样式，使得其形成斑马线效果（隔行换色,内容偶数行为蓝）
2.当鼠标移动到相应行时，颜色变为红色，移出时恢复原色
步骤：
1.根据id找出特定需要设置的table元素
2.找出table元素中的tbody元素，创建even变量并把它初始化为false;
3,。遍历表格里的所有数据行
4.如果变量even为true,则设置行背景颜色样式，中间还需要设置一个判断奇数偶数行的变量；把odd变量修改为false;
5.如果变量为false,则设置行背景颜色样式，中间还需要设置一个判断奇数偶数行的变量；但把变量设为true;
6.为行元素绑定鼠标一进一出事件处理函数；移入时，改变相应行的背景颜色和字体；移出时根据奇数偶数行变量进行
改进：
通过DOM来设置className属性来获得或修改元素的class,所以我们完全可以利用这个属性为元素添加或替换原来
的样式属性；只不过我们需要在CSS样式表中重新定义class选择器的样式；这样就实现了完全在CSS中修改样式的目的；
从而实现表现层与行为层的分离；
PS：需要注意的是，通过className设置元素class属性的时候，是将原来的class属性替换而不是追加；
为解决这样的问题，我们需要使用字符串操作即：
elem.className+=" newClassName";前面加了一个空格！！一定要注意！！
PS：当然对于样式属性设置是替换还是添加，这就要根据实际情况来判定了；
为此,我们可以自己封装一个addClass方法；
步骤如下：
1.查看className属性是否为空；
2.是，则把新的class属性赋值给className属性；
3.否，则把一个空格和新的class属性追加到className属性上去；
修改版：
通过DOM来设置样式案例2：
PS：这边为什么要用js来修改呢，而不用CSS？
因为假如我们用CSS来设置样式，则必须使用高级的选择器，但是有些浏览器是不支持的；
假如为相应的行加上CLASS也是可以完成的，但是当我们要改变表格的行和列的时候，这时就得
为新添加的行和列手动添加class，所以这样是非常不灵活的，为此我们可以采用JS DOM来解决；
JS DOM擅长这类重复性灵活的样式改变；
1.通过DOM来改变表格样式，使得其形成斑马线效果（隔行换色,内容偶数行为蓝）
2.当鼠标移动到相应行时，颜色变为红色，移出时恢复原色
步骤：
1.根据id找出特定需要设置的table元素
2.找出table元素中的tbody元素，创建even变量并把它初始化为false;
3,。遍历表格里的所有数据行
4.如果变量even为true,则设置行背景颜色样式，中间还需要设置一个判断奇数偶数行的变量；把odd变量修改为false;
5.如果变量为false,则设置行背景颜色样式，中间还需要设置一个判断奇数偶数行的变量；但把变量设为true;
6.为行元素绑定鼠标一进一出事件处理函数；移入时，改变相应行的背景颜色和字体；移出时根据奇数偶数行变量进行
判定来恢复原来的背景颜色样式；
<!-- HTML代码 -->
<body>
<table id="xingcheng">
<caption>行程表</caption>
<thead>
<tr>
<th>时间</th>
<th>地点</th>
</tr>
</thead>
<tbody>
<tr>
<td>4.8</td>
<td>北京</td>
</tr>
<tr>
<td>4.10</td>
<td>上海</td>
</tr>
<tr>
<td>4.20</td>
<td>深圳</td>
</tr>
<tr>
<td>4.21</td>
<td>厦门</td>
</tr>
</tbody>
</table>
</body>/*CSS代码*/
table{
margin: auto;
border: 1px solid black;
}
thead {
background-color: yellow;
border: 1px solid red;
font-style: italic;
font-weight: bold;
text-align:left;
}
tbody td{
width: 100px;
}
//JSd代码：
function stripTables(){
var Tab=document.getElementById("xingcheng");
var Tbody=Tab.getElementsByTagName("Tbody");
var even=false;
var rows=Tbody[0].getElementsByTagName("tr");
//设置斑马线效果
for (var i = 0; i < rows.length; i++) {
if(even){
rows[i].style.backgroundColor="blue";
//在这边需要设定一个对象标记变量，用于标记判定该行是否为奇数行
//以便于后面鼠标一进一出的颜色改变判断
rows[i].even=true;
even=false;
}else{
rows[i].style.backgroundColor="pink";
rows[i].even=false;
even=true;
}
//通过鼠标的移入移出来改变行的背景颜色
rows[i].οnmοuseοver=function(){
this.style.backgroundColor="red";
this.style.fontWeight="bold";
}
rows[i].οnmοuseοut=function(){
//这边需要注意的是务必使用this这个关键字来代表鼠标当前停留或离开的元素；具有实时性
if(this.even){
this.style.backgroundColor="blue";
}else{
this.style.backgroundColor="pink";
}
this.style.fontWeight="nomal";
}
}
}
addLoadEvent(stripTables);
改进：
通过DOM来设置className属性来获得或修改元素的class,所以我们完全可以利用这个属性为元素添加或替换原来
的样式属性；只不过我们需要在CSS样式表中重新定义class选择器的样式；这样就实现了完全在CSS中修改样式的目的；
从而实现表现层与行为层的分离；
PS：需要注意的是，通过className设置元素class属性的时候，是将原来的class属性替换而不是追加；
为解决这样的问题，我们需要使用字符串操作即：
elem.className+=" newClassName";前面加了一个空格！！一定要注意！！
PS：当然对于样式属性设置是替换还是添加，这就要根据实际情况来判定了；
为此,我们可以自己封装一个addClass方法；
步骤如下：
1.查看className属性是否为空；
2.是，则把新的class属性赋值给className属性；
3.否，则把一个空格和新的class属性追加到className属性上去；
修改版：
<!-- HTML代码 -->
<body>
<table id="xingcheng">
<caption>行程表</caption>
<thead>
<tr>
<th>时间</th>
<th>地点</th>
</tr>
</thead>
<tbody>
<tr>
<td>4.8</td>
<td>北京</td>
</tr>
<tr>
<td>4.10</td>
<td>上海</td>
</tr>
<tr>
<td>4.20</td>
<td>深圳</td>
</tr>
<tr>
<td>4.21</td>
<td>厦门</td>
</tr>
</tbody>
</table>
</body>/*CSS代码*/
table{
margin: auto;
border: 1px solid black;
}
thead {
background-color: yellow;
border: 1px solid red;
font-style: italic;
font-weight: bold;
text-align:left;
}
tbody td{
width: 100px;
}
.even{
background-color: blue;
}
.odd{
background-color: pink;
}
.even,.odd{
font-weight: normal;
}
.hover{
background-color: red;
font-weight:bold;
}
//JSd代码：
function stripTables(){
var Tab=document.getElementById("xingcheng");
var Tbody=Tab.getElementsByTagName("Tbody");
var even=false;
var rows=Tbody[0].getElementsByTagName("tr");
//设置斑马线效果
for (var i = 0; i < rows.length; i++) {
if(even){
//添加class
addClass(rows[i],"even");
//在这边需要设定一个对象标记变量，用于标记判定该行是否为奇数行
//以便于后面鼠标一进一出的颜色改变判断
rows[i].even=true;
even=false;
}else{
//添加class
addClass(rows[i],"odd");
rows[i].even=false;
even=true;
}
//通过鼠标的移入移出来改变行的背景颜色
rows[i].οnmοuseοver=function(){
//此时不应该是添加class是应该替换
this.className="hover";
}
rows[i].οnmοuseοut=function(){
//这边需要注意的是务必使用this这个关键字来代表鼠标当前停留或离开的元素；具有实时性
if(this.even){
//此时不应该是添加class是应该替换
this.className="even";
}else{
//此时不应该是添加class是应该替换
this.className="odd";
}
}
}
}
//为元素添加新的class属性方法
function addClass(elem,newClass){
if(!elem.className){
elem.className=newClass;
}else{
//添加空格，强调是追加效果
elem.className+=" ";
elem.className+=newClass;
}
}
addLoadEvent(stripTables);
扫一扫
184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
