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> < ...
随机推荐
- rest-framework框架组件
序列化组件 创建一个序列化类, 视图四种方式 以下代码都需要创建一个serializers.py文件 from rest_framework import serializers from CBV_a ...
- excel时间戳转化为标准日期（日期转化为日期戳）
最近在学习python将数据导入到excel,发现日期变成数字而不是日期格式的问题. 第一眼看去肯定是excel单元格格式问题,一般excel单元格格式为常规,而常规处理日期时就显示为数字,所以就想到 ...
- ResNet详解（转）
本篇文章涉及到的文献 Residual Network(ResNet) Deep Residual Learning for Image Recognition[arXiv:1512.03385] I ...
- Train Problem II（卡特兰数 组合数学）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1023 Train Problem II Time Limit: 2000/1000 MS (Java/ ...
- Git学习系列之Git是什么？
前言 现在主流IDE里,都集成git了. https://git-scm.com/docs 史上最浅显易懂的Git教程! 为什么要编写这个教程?因为我在学习Git的过程中,买过书,也在网上Google ...
- SpringMVC的json交互
一.注解说明 1.@RequestBody 作用:@RequestBody注解用于读取http请求的内容(字符串),通过springmvc提供的HttpMessageConverter接口将读到的内 ...
- zato集群部署
注: SQL ODB和Cluster’s config需要首先依次创建,其他三个次序随意 对不熟悉的命令,使用server create *** -h 查看帮助文档 修改完后配置文件,要重启(zato ...
- BNU44583——Star Trek: First Contact——————【01背包】
H. Star Trek: First Contact Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld ...
- 架构实战项目心得（十）：基于spring-ladp的统一用户中心结构设计以及代码结构设计
一.目录设计 1 公司 2 部门 3 注册人员 4 层级人员 二.规则 1 注册 自行注册人员放到模拟公司的目录下,等所属公司组织结构建立完毕,将此人员迁移到所属公司(或者删除此人员,所属公司新建此人 ...
- Nginx通关攻略
Nginx是什么 没有听过Nginx?不要紧,一定听过它的"同行"Apache吧!Nginx同Apache一样都是一种WEB服务器.基于REST架构风格,以统一资源描述符(Unif ...