注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

JavaScript样式切换  

2010-08-22 12:50:46|  分类: javascript |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
方案一
1.效果图
样式切换总结 - 郭培 - 前端工程师 郭培的博客
 2.样式切换文件
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
        <title>样式切换</title>    
        <style type="text/css">            
            .Table1{border:1px solid #ccc;background:#eee;}
            .TableHead1{font-family:Verdana,Arial;font-weight:bold;font-size:10pt;}
            .TableContent1{font-family:Verdana,Arial;font-size:10pt;}
            
            .Table2{border:1px solid #f00;background:#f33;}
            .TableHead2{font-family:Verdana,Arial;font-weight:bold;font-size:10pt;}
            .TableContent2{font-family:Verdana,Arial;font-size:10pt;}
            
            .Table3{border:1px solid #ff0;background:#ff2;}
            .TableHead3{font-family:Verdana,Arial;font-weight:bold;font-size:10pt;}
            .TableContent3{font-family:Verdana,Arial;font-size:10pt;}
        </style>
    </head>
    <body>
        <table id="table" class="Table3">
            <tr><th id="tableHead" class="TableHead3">Product Name</th></tr>
            <tr><td id="tableFirstLine" class="TableContent3">Aireplane</td></tr>
            <tr><td id="tableSecondLine" class="TableContent3">Big car</td></tr>
        </table>
        <br>
        <input type="button" value="Set Style 1" onclick="setStyle1();"/>
        <input type="button" value="Set Style 2" onclick="setStyle2();"/>
    </body>
    <script type="text/javascript">
        //将表格的风格改变为style1
        function setStyle1(){
            //获取HTML元素的引用
            oTable = document.getElementById('table');
            oTableHead = document.getElementById('tableHead');
            oTableFirstLine = document.getElementById('tableFirstLine');
            oTableSecondLine = document.getElementById('tableSecondLine');
            //设置风格
            oTable.className = "Table1";
            oTableHead.className = "TableHead1";
            oTableFirstLine.className = "TableContent1";
            oTableSecondLine.className = "TableContent1";
        }
        //将表格的风格改变为style2
        function setStyle2(){
            //获取HTML元素的引用
            oTable = document.getElementById('table');
            oTableHead = document.getElementById('tableHead');
            oTableFirstLine = document.getElementById('tableFirstLine');
            oTableSecondLine = document.getElementById('tableSecondLine');
            //设置风格
            oTable.className = "Table2";
            oTableHead.className = "TableHead2";
            oTableFirstLine.className = "TableContent2";
            oTableSecondLine.className = "TableContent2";
        }
    </script>
</html>
  评论这张
 
阅读(1252)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017