首页 > 下载 > 下载详文:Javascript 更改/修改 class 属性

Javascript 更改/修改 class 属性

发布时间:2012年04月04日 19时44分06秒   属性:程序Web开发 > Javascript/Html    访问次数:65902
字体: 初始 添加收藏 分享给好友

Javascript 更改标签的class属性

Javascript 切换更改网页标签的Class属性,通过 javascript 动态控制标签样式class属性。在每个标签中都有一个class属性用以接收,样式Style样式,一般情况下是直接将样式名直接赋值给class,那么本通过Javascript来回自由切换样式达到不通显示效果。

示例一

先在<style>中定义好两个css样式,命名分别为font01和font02。font01的字体大小为20px(即 font-size:20px;),Color为红色,font-family为黑体,font-variant为normal;font02的字体为24px,color为#0033CC,font-family为黑体,font-variant为大写字母显示small-caps;,并且加粗字体font-weight:bolder。

javascript脚本建立function changeCssClass(objDiv,objClass)方法,带入动态参数objDiv为div的id动态传入,objClass为样式名称动态传入。在方法中把objClass赋给objDiv的className,即document.getElementById(objDiv).className = objClass;

在<body>中放入两个按钮响应changeCssClass(objDiv,objClass)事件,用来来回切换div的class属性。div建一个个id为FontDiv, class为font01;div简单输入文字,这里示例中为“ Javascript class name change preview!!”。下面是代码和效果。

HTML 代码  复制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .font01 { font-size:20px; color:Red; font-family:黑体; font-variant:normal } .font02 { font-size:24px; color:#0033CC; font-family:黑体; font-variant:small-caps; font-weight:bolder } </style> <script language="javascript" type="text/javascript"> // <![CDATA[ //Copyright (C) 遗昕 | weisim3.com 04.04.2012 function changeCssClass(objDiv,objClass) { document.getElementById(objDiv).className = objClass; } // ]]> </script> </head> <body> <div> <input id="Button1" type="button" value="Blue" onclick="return changeCssClass('FontDiv','font02')" /> <input id="Button2" type="button" value="Red" onclick="return changeCssClass('FontDiv','font01')" /> </div> <div style="padding-top:15px"> <div id="FontDiv" class="font01"> Javascript class name change preview!! </div> </div> </body> </html>

示例一效果

示例二

再加入两个样式,font03 和font04 两个的样式属性都大致相同font-size:54px;、color:#0033CC; 、font-family:黑体;、font-variant:small-caps;、font-weight:bolder;,不同的是font03的background-color为#BADBE2,font04设置了背景图片background-image: url('img/1.png');。在<body>中再加入按钮用以切换font04。在div响应鼠标事件onmouseout="return changeCssClass('FontDiv','font01')"和onmouseover="return changeCssClass('FontDiv','font03')",鼠标滑入滑出时触发,下面全部代码。

HTML 代码  复制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Javascript class name change preview!! - weisim3.com</title> <style type="text/css"> .font01 { font-size:20px; color:Red; font-family:黑体; font-variant:normal } .font02 { font-size:24px; color:#0033CC; font-family:黑体; font-variant:small-caps; font-weight:bolder } /*示例二*/ .font03 { font-size:54px; color:#0033CC; font-family:黑体; font-variant:small-caps; font-weight:bolder; background-color:#BADBE2 } .font04 { font-size:54px; color:#0033CC; font-family:黑体; font-variant:small-caps; font-weight:bolder; background-image: url('img/1.png'); } </style> <script language="javascript" type="text/javascript"> // <![CDATA[ //Copyright (C) 遗昕 | weisim3.com 04.04.2012 function changeCssClass(objDiv,objClass) { document.getElementById(objDiv).className = objClass; } // ]]> </script> </head> <body> <div> <input id="Button1" type="button" value="Blue" onclick="return changeCssClass('FontDiv','font02')" /> <input id="Button2" type="button" value="Red" onclick="return changeCssClass('FontDiv','font01')" /> <input id="Button3" type="button" value="BgImg" onclick="return changeCssClass('FontDiv','font04')" /> </div> <div style="padding-top:15px;"> <div id="FontDiv" class="font01" onmouseout="return changeCssClass('FontDiv','font01')" onmouseover="return changeCssClass('FontDiv','font03')" > Javascript class name change preview!! </div> </div> </body> </html>

示例二效果

免费
Javascript 更改/修改 class 属性 (1)
本下载连接不支持第三下载工具打开,请直接点击下载即可
文章版权归属weisim3.com所有,未经书面版权许可同意,不得私自转载(或做修改转载),源文件示例仅供学习使用,更不要出于商业用途或印刷出版发行!否则将追究其相关法律责任,版权联系QQ:729260499。
遺昕 | Weisim3.com 下载许可条款 ( 您必须接受同意才可下载 ) .