javascript DOM编程艺术学习笔记（5）通过DOM来设置样式案例

来源：互联网发布：淘宝代运营哪家好编辑：程序博客网时间：2024/06/03 17:52

*********
通过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].onmouseover=function(){this.style.backgroundColor="red";this.style.fontWeight="bold";}rows[i].onmouseout=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){//添加classaddClass(rows[i],"even");//在这边需要设定一个对象标记变量，用于标记判定该行是否为奇数行//以便于后面鼠标一进一出的颜色改变判断rows[i].even=true;even=false;}else{//添加classaddClass(rows[i],"odd");rows[i].even=false;even=true;}//通过鼠标的移入移出来改变行的背景颜色rows[i].onmouseover=function(){//此时不应该是添加class是应该替换this.className="hover";}rows[i].onmouseout=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);

0 0