*********
通过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);