如何用js在DOM中添加/删除class命名

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ padding:0; margin:0;}
#div1{ width:910px; border:1px solid #000; overflow:hidden; height:200px; padding:20px 0; position:relative}
#div1 .active{ background:#FF0; border:1px solid #000; }
#div1 div{ border:1px solid #F00; width:200px; height:200px; float:left; margin:0 10px; }
#div1 .list{ position:absolute; top:0; margin-left:0;}
#div1 .list1{ position:absolute; top:20px; left:20px;}
#div1 .list2{ position:absolute; top:20px; left:240px;}
#div1 .list3{ position:absolute; top:20px;left:460px;}
#div1 .list4{ position:absolute; top:20px; left:680px;}

</style>
<script>
window.onload=function(){
  var oDiv1=document.getElementById(‘div1‘);
  var oBtn=oDiv1.getElementsByTagName(‘div‘);
  for(var i=0; i<oBtn.length; i++){
	  oBtn[i].onmouseover=function(){
		  for(var i=0; i<oBtn.length;i++){
			  var classVal = oBtn[i].getAttribute("class");
		       classVal = " " + classVal + " ";
		       classVal = classVal .replace(" active ","");
              oBtn[i].setAttribute("class",classVal );
		  }
		   var classVal = this.getAttribute("class");
		    classVal = " " + classVal + " ";
		   classVal = classVal.concat(" active");
		   this.setAttribute("class",classVal );s
	      }
   };

}
</script>
</head>

<body>
<div id="div1">
   <div class="list list1"></div>
   <div class="list list2"></div>
   <div class="list list3"></div>
   <div class="list list4"></div>
</div>
</body>
</html>

以上代码就可以

借此机会,介绍一下replace和concat的用法

replace定义和用法

replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。

stringObject.replace(regexp/substr,replacement)

http://www.w3school.com.cn/jsref/jsref_replace.asp

concat定义和用法

concat() 方法用于连接两个或多个数组。

<html>
<body>

<script type="text/javascript">

var a = [1,2,3];
document.write(a.concat(4,5));

</script>

</body>
</html>

结果是1,2,3,4,5

时间: 2024-11-06 15:02:47

如何用js在DOM中添加/删除class命名的相关文章

js在table中添加tbody块,方便整块的添加和删除

利用js在table中添加tbody块,方便整块的添加和删除,以下为添加. <table width="400" border="1" cellspacing="0" cellpadding="0" id="table1"> </table> <script language="javascript"> var value = "内容&quo

LinkButton中添加删除确认框

LinkButton1.Attributes.Add("onclick", "javascript:return confirml('确认删除?');"); LinkButton中添加删除确认框

Delphi通过AppendMenu和DeleteMenu在系统菜单中添加删除菜单项

Delphi在系统菜单中添加删除系统菜单项 Delphi在系统菜单中添加删除系统菜单项,利用Windows提供的API函数GetSystemMenu可以得到窗口的系统菜单句柄,再通过AppendMenu和DeleteMenu就可以添加和删除菜单了. 工具/原料 Delphi7 Windows电脑 方法/步骤 打开Delphi7,创建新的工程,默认新窗体的Name属性为Form1   在Form1的Object Inspector中Events里双击OnCreate为Form1创建OnCreate

Linux/Ubuntu中添加删除新用户

操作环境:Ubuntu Server 14.04,系统上仅有一个用户root 1. adduser 命令添加新用户 #adduser username 注意adduser与useradd命令的区别,useradd是Linux系统中二进制可执行程序工具,adduser是封装了useradd之后的可执行脚本.因此adduser比useradd功能更加强大和智能,adduser在创建用户同时进行创建用户主目录等其他相关工作. 2.赋予新建用户管理员权限 只需要将用户加入sudo用户组中就可以赋予用户管

ORACLE中添加删除主键

本文转自:http://blog.chinaunix.net/uid-17079336-id-2832443.html 1.创建表的同时创建主键约束(1)无命名create table student (studentid int primary key not null,studentname varchar(8),age int);(2)有命名create table students (studentid int ,studentname varchar(8),age int,constr

JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作

html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick="add()">add</button> </div> <div id="a3"> <button onclick="del()">del</button> </div> &l

jQuery08源码 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选

jQuery.fn.extend({ //$('ul').find('li').css('background','red'); //$('ul').find( $('li') ).css('background','red'); find: function( selector ) { var i, ret = [], self = this, len = self.length; if ( typeof selector !== "string" ) {//$('li') //jQ

js在页面中添加一个元素 —— 添加弹幕

参考地址 [往下拉 —— 使用HTML DOM appendChild() 方法实现元素的添加 ] 一.创建 HTML <div class="right_liuyan"> <marquee id="liuyan" scrollAmount=2 width=200 height=300 direction=up > <div class="danmu"> <p>竟然还有文字识别!!!</p&g

js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>