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> < ...
随机推荐
- docker 查看容器信息---格式化
镜像,ID,端口号,状态 docker ps -a --format "table {{.Image}}\t{{.ID}}\t{{.Ports}}\t{{.Status}}" 列出 ...
- 设置第三方的SMTP服务
取得授权码:
- java实现图片文字识别的两种方法
一.使用tesseract-ocr 1. https://github.com/tesseract-ocr/tesseract/wiki上下载安装包安装和简体中文训练文件 window64位安装 ...
- Partition Array by Odd and Even
Partition an integers array into odd number first and even number second. Example Given [, , , ], , ...
- WIndows下 Pycharm 配置Anaconda和TensorFlow
1安装PyCharm 前提安装Python,然后去官网下载PyCharm 2 安装Anaconda 在官网下载Anaconda,并安装 下载好之后就跟安装一般的软件没啥区别,选择自己安装的文件夹,下一 ...
- C# checked和unchecked运算符
1.作用 checked和unchecked运算符用于CLR(公共语言运行时)强制对它们所作用的代码块,进行(不进行)代码溢出检测 2.示例说明 有代码如下: static void Main(str ...
- Access如何判断字符串从左边第一个数字为5
步骤如下: 1.打开VBA(ALT+F11)2.右键模块=>插入=>模块3.粘贴以下代码: Public Function CutStr(chkStr As String) As Stri ...
- php中preg正则函数使用
1.preg_match和preg_match_all的区别 preg_match和 preg_match_all区别是preg_match只匹配一次.而preg_match_all全部匹配,直到字符 ...
- Git命令基本操作备忘
创建Git仓库并上传到远程Git仓库 git init git config user.name "显示的名称" git config user.email "EMAIL ...
- AtCoder Grand Contest 006 F - Blackout
Description 在 \(n*n\) 的棋盘上给出 \(m\) 个黑点,若 \((x,y)\),\((y,z)\) 都是黑点,那么 \((z,x)\) 也会变成黑点,求最后黑点的数量 题面 So ...