dom操作排他思想
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title>
<style type="text/css">
div{
width: 600px;
height: 100px;
border: 1px solid gray;
}
p{
float: left;
width: 60px;
height: 60px;
background-color: #ccc;
margin-right: 10px;
border-radius: 50%;
}
</style>
<script type="text/javascript">
window.onload=function(){
var Ops=document.getElementById('box1').getElementsByTagName('p');
var biaoti=document.getElementById('biaoti');
for(var i = 0;i < Ops.length;i++){
Ops[i].index = i;
Ops[i].onclick = function(){
//点击后才执行这里的代码
//第一件事：让所有人(包括自己)都变灰色
for(var j = 0;j < Ops.length;j++){
Ops[j].style.backgroundColor = "#ccc";
} //第二件事：让自己变红色
this.style.backgroundColor = "greenyellow"; //第三件事：让h1里面xcg的内容变为自己的编号
biaoti.innerHTML = this.index;
}
} } </script>
</head>
<body>
<h1 id="biaoti">哈哈</h1>
<div id="box1">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
dom操作排他思想的更多相关文章
- DOM操作的概念
////dom 操作//核心思想:找到元素 操作元素//js 找元素:// document.getElementById(dd); 唯一确定// 返回的都是数组 数组元素是元素对象// docume ...
- 12-关于DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- 前端JavaScript(3）-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- 关于DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- 12 DOM操作的相关案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- javascrtpt DOM操作
DOM DOM:(document object mode)文档对象模型.DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构. 目的就是为了能让js操作html元素而制定的一个规范 DO ...
- 关于DOM操作的案例
1. 模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> < ...
随机推荐
- storm（3）-本机模式-helloworld
pom.xml <dependency> <groupId>org.apache.storm</groupId> <artifactId>storm-c ...
- 使用Maven运行测试提示Module sdk 1.5的解决方法
解决方法: 1. 配置Project Structure 2. 在MAVEN_HOME/conf/setting.xml中添加profile 3. 在Maven项目的pom.xml文件里添加标签 三种 ...
- iview 之 穿梭框 transfer
概述 双栏穿梭选择框,常用于将多个项目从一边移动到另一边. 说明 Transfer 组件主要基于以下四个 API 来使用: :data:总体数据,数组,每项为一个对象,且必须含有 key 值,组件基于 ...
- uipath接入Python
安装UiPath.Python.Activities,然后会有五个.Activities,他们的功能分别如下: 本人原创,转发或引用请注明出处.
- Axure原型设计介绍
在第八周的课堂上,王文娟老师在校园系统上发布了对于自行选择的原型设计软件进行资料查找以及自学的任务.因为之前的课程学习需要,我们大概掌握了原型设计软件Axure的使用,下面是一些我们学习过程中的介绍 ...
- DP Intro - poj 1947 Rebuilding Roads(树形DP)
版权声明:本文为博主原创文章,未经博主允许不得转载. Rebuilding Roads Time Limit: 1000MS Memory Limit: 30000K Total Submissi ...
- [转]常用 GDB 命令中文速览
目录 break -- 在指定的行或函数处设置断点,缩写为 b info breakpoints -- 打印未删除的所有断点,观察点和捕获点的列表,缩写为 i b disable -- 禁用断点,缩写 ...
- Docker安装及常用操作
Docker简介: Docker是一个轻量级容器技术,类似于虚拟机技术,但性能远远高于虚拟机,Docker支持将软件编译成一个镜像(image),在这个镜像中做好对软件的各种配置,然后可以运行这个镜像 ...
- 上传base64格式的图片到服务器
上传base64格式的图片到服务器 /**bash64上传图片 * @param $base64 图片的base64数据 * @param $path 保存路径 */ function base64_ ...
- web_03Java ee实现定时跳转，使用C3P0，DBUtils类重构数据库操作
Web Web_02版本: 实现功能 1,定时跳转 2,C3P0连接池 3,DBUtils工具类 设计内容 1,setHeader方法 2, 3, *重点 1,定时跳转: 1,selver实现 ...