龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

javascript修改html元素的class实例

时间:2012-12-29 08:41来源:未知 作者:admin 点击: 次
分享到：
需要注意的是在JavaScript中，如果要修改一个元素的class属性，一定要写为className，因为class是JavaScript的保留字。 代码如下 script type=text/javascript function over(){ var para = document.getElementById(
需要注意的是在JavaScript中，如果要修改一个元素的class属性，一定要写为className，因为class是JavaScript的保留字。
 代码如下

<script type="text/javascript">
 function over(){
  var para = document.getElementById("testPara").className = "testOver";
 }
 function out(){
  var para = document.getElementById("testPara").className = "testNormal";
 } 
</script>

HTML代码

本例只需要一个段落，并且给它设置了默认的class属性“testNormal”，而鼠标划过和划出会分别触发上面的两个JavaScript函数，从而改变该段落自身的class属性。

 代码如下

<p id="testPara" class="testNormal" onmouseover="over()" onmouseout="out()">
    我是示例段落，鼠标滑过我，就可以改变我的class属性，从而改变应用的CSS规则。   
</p>
     


CSS

CSS代码设置了两个测试用的样式。

 代码如下

.testNormal {
 border:1px solid black;
 }
.testOver {
 background:#999999;
 border:1px solid black;
 font-weight:bold;
 padding:3em;
 }

精彩图集
node+express+ejs制作简单页面上手指南_node.js
node+express+
js点亮星星评分并获取参数的js代码
js点亮星星评
鼠标滑过出现预览的大图提示效果
鼠标滑过出
查找Oracle高消耗语句的方法
查找Oracle高
PHP开发者必须掌握的6个关键字
PHP开发者必

热门标签

php分页代码 JS定义二维数组 类级属性 底部菜单 YII2 表格结构 数据库同步 验证插件 中国天气网 nls 下拉式菜单 poll 数据变 widget开发 后台获取 FTP自动备份 goto 前期绑定 数据盘 ajax提交表单 多表关联 坐标 点滴 24天 Hibernate_JP atime informati 存储hmtl 递增 监听机制 拒绝服务攻击 nginx做负载CDN 同大 文件头 rewrite 进程间通信 模拟表单 Oracle客户端 zip扩展安装 截屏 Execpt 实际内存占用 JAVA对象转JSON max_user 异步回调 javascript:v 最小高度在IE atoi() lob file_get_con 京东秒杀软件 修改数据库名 文本信息 导入 获取本机公网 默认拷贝函数 合并表 卡号 Lesson01_08 php php计

赞助商链接