JS 操作对象 事件 样式
1、获取标记对象
css 1 - class 2 - id 3 - 标记选择器
js 1 - class 2 - id 3 - 标记 4 - name
+ document.getElementById('id')； - 获取一个对象
+ document.getElementsByClassName('class'); - 获取的是一个数组
+ document.getElementsByTagName('标记'); - 获取的也是一个数组
<input type="button" name="ccc"/> 这里的name是给服务器发送的
+ document.getElementsByName('name'); - 获取的也是一个数组
2、掌握三个事件
+ onclick - 点击事件
+ onmouseover - 鼠标移入事件
+ onmouseout - 鼠标移出事件
3、控制标记的样式
标记对象.style.样式 = "值";
样式里带 “-” 要删掉，后面的第一个字母变为大写
放在等号右边是取值，可以看到元素内联样式的值
js里，对象的index属性，可以记录一个int类型的值
例如：移入div 变大 移出的时候便会原位
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
#aaa {width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="aaa"></div> </body>
</html>
<script type="text/javascript">
var a = document.getElementById('aaa');
//移入 变大
a.onmouseover = function () {
a.style.width = "200px";
a.style.height = "200px";
}
//移除回到原位
a.onmouseout = function () {
a.style.width = "100px";
a.style.height = "100px";
}
</script>
移入的时候变成蓝色 移出的时变成原来的颜色
<style type="text/css">
#aaa {width:100px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="aaa"></div> </body>
</html>
<script type="text/javascript">
var a = document.getElementById('aaa');
//移入 变大
a.onmouseover = function () {
a.style.backgroundColor = "blue";
}
//移除回到原位
a.onmouseout = function () {
a.style.backgroundColor = "red";
}
</script>
导航栏变色
<style type="text/css">
.aaa {width:100px;
height:100px;
background-color:red;
float:left;
margin-right:10px;
}
</style>
</head>
<body>
<div class="aaa"></div>
<div class="aaa"></div>
<div class="aaa"></div>
<div class="aaa"></div>
<div class="aaa"></div> </body>
</html>
<script type="text/javascript">
var a = document.getElementsByClassName('aaa');
for (var i = ; i < a.length; i++)
{
//移入的时候变为绿色
a[i].onmouseover = function () {
this.style.backgroundColor = "green";//这里的this代表移入哪个div 代表的哪个div
//就是a[i] 不过i在function函数里面不是那个索引了 是长度了所以用this
}
//移出的时候变为红色
a[i].onmouseout = function () {
this.style.backgroundColor = "red";//同上
}
}
</script>
有导航条
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.aaa {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin-right: 10px;
} .div2 {
width: 100px;
height: 600px;
background-color: green;
display: none;
float:left;
margin-right:10px;
margin-top:110px;
}
</style>
</head>
<body>
<div class="aaa">
<div class="div2"></div>
</div>
<div class="aaa">
<div class="div2"></div>
</div>
<div class="aaa">
<div class="div2"></div>
</div>
<div class="aaa">
<div class="div2"></div>
</div>
<div class="aaa">
<div class="div2"></div>
</div>
</body>
</html>
<script type="text/javascript">
var a = document.getElementsByClassName('aaa');
var b = document.getElementsByClassName('div2');
for (var i = ; i < a.length; i++) {
//索引
a[i].index = i;
//移入的时候变为蓝色
a[i].onmouseover = function () {
this.style.backgroundColor = "blue";//这里的this代表移入哪个div 代表的哪个div
//就是a[i] 不过i在function函数里面不是那个索引了 是长度了所以用this
b[this.index].style.display = "block";
}
//移出的时候变为红色
a[i].onmouseout = function () {
this.style.backgroundColor = "red";//同上
b[this.index].style.display = "none";
}
}
</script>
上面几个是移入移出的 这里在加上点击事件
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.aaa {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin-right: 10px;
} .div2 {
width: 100px;
height: 600px;
background-color: green;
display: none;
float:left;
margin-right:10px;
margin-top:110px;
}
</style>
</head>
<body>
<div class="aaa">
<div class="div2"></div>
</div>
<div class="aaa">
<div class="div2"></div>
</div>
<div class="aaa">
<div class="div2"></div>
</div>
<div class="aaa">
<div class="div2"></div>
</div>
<div class="aaa">
<div class="div2"></div>
</div>
</body>
</html>
<script type="text/javascript">
var a = document.getElementsByClassName('aaa');
var b = document.getElementsByClassName('div2');
for (var i = ; i < a.length; i++) {
//索引
a[i].index = i;
//点击的时候 变为黑色 导航条显示
a[i].onclick = function () {
//每个导航都变为原来的颜色 导航条隐藏
for(var j=;j<a.length;j++)
{a[j].style.backgroundColor="red";
b[j].style.display="none";
}
this.style.backgroundColor = "black";
b[this.index].style.display = "block";
}
//移入的时候变为蓝色
a[i].onmouseover = function () {
if(this.style.backgroundColor!="red")
this.style.backgroundColor = "blue";
}
//移出的时候变为红色 导航条隐藏
a[i].onmouseout = function () {
if(this.style.backgroundColor!="balck")
{ this.style.backgroundColor = "red";}
}
}
</script>
选项卡
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.aaa {
width: 100px;
height: 30px;
background-color: red;
float: left;
margin-right: 10px;
} .div2 {
position: absolute;
width: 540px;
height: 330px;
margin-top:33px;
background-color: green;
z-index=
}
</style>
</head>
<body>
<div class="aaa"></div>
<div class="aaa"></div>
<div class="aaa"></div>
<div class="aaa"></div>
<div class="aaa"></div>
<!-- 下面带数字 更更直观看到那一页-->
<div class="div2"></div>
<div class="div2"></div>
<div class="div2"></div>
<div class="div2"></div>
<div class="div2"></div> </body>
</html>
<script type="text/javascript">
var a = document.getElementsByClassName('aaa');
var b = document.getElementsByClassName('div2');
var zend = ;
for (var i = ; i < a.length; i++) {
//索引
a[i].index = i;
//点击 打开哪一个导航 就打开那一页选项卡
a[i].onclick = function () {
for (var j = ; j < a.length; j++) {
a[j].style.backgroundColor = "red";
}
this.style.backgroundColor = "black";
b[this.index].style.zIndex = zend;
zend++;
}
//移入 颜色变为蓝色
a[i].onmouseover = function () {
if (this.style.backgroundColor != "black")
this.style.backgroundColor = "blue";
}
//移出 颜色变为原来的颜色 红色
a[i].onmouseout = function () {
if (this.style.backgroundColor == "blue")
this.style.backgroundColor = "red";
}
}
</script>
非自动的大图轮播
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<!--大图轮播总框架-->
<div class="all">
<img class="imga" src="1L.jpg" style="display: block;" />
<img class="imga" src="2.jpg" />
<img class="imga" src="3.jpg" />
<img class="imga" src="4.jpg" />
<img class="imga" src="5.jpg" />
<div id="left"><</div>
<div id="right">></div>
</div>
</body>
</html>
<script type="text/javascript">
var left = document.getElementById("left");
var right = document.getElementById("right");
var count = ;
var tu = document.getElementsByClassName('imga');
//点击右边
right.onclick = function () {
for (var i = ; i < tu.length; i++) {
tu[i].style.display = "none";
}
count++;
if (count > (tu.length - ))
count = ;
tu[count].style.display = "block";
}
//点击左边
left.onclick = function () {
for (var i = ; i < tu.length; i++) {
tu[i].style.display = "none";
}
count--;
if (count < )
count = tu.length - ;
tu[count].style.display = "block";
}
</script>
css的
.all {
position: relative;
margin-top: 30px;
margin-left: %;
width: %;
height: 500px;
background-color: blue;
}
.imga{
position: absolute;
width: %;
height: %;
display:none;
}
#left {
position: absolute;
left: 10px;
top: 200px;
width: 30px;
height: 100px;
z-index: ;
cursor: pointer;
color: white;
font-size: 60px;
line-height:100px;
background-color: black;
}
#right {
position: absolute;
right: 10px;
top: 200px;
width: 30px;
height: 100px;
z-index: ;
cursor: pointer;
color: white;
font-size: 60px;
line-height:100px;
background-color: black;
}
用函数简化点
head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<!--大图轮播总框架-->
<div class="all">
<img class="imga" src="1L.jpg" style="display: block;" />
<img class="imga" src="2.jpg" />
<img class="imga" src="3.jpg" />
<img class="imga" src="4.jpg" />
<img class="imga" src="5.jpg" />
<div id="left"><</div>
<div id="right">></div>
</div>
</body>
</html>
<script type="text/javascript">
var left = document.getElementById("left");
var right = document.getElementById("right");
var count = ;
var tu = document.getElementsByClassName('imga');
//点击右边
right.onclick = function ()
{
move();
}
//点击左边
left.onclick = function () {
move();
} function move(a) {
for (var i = ; i < tu.length; i++) {
tu[i].style.display = "none";
}
//如果向左移 那么给a=0
if (a == ) {
count--;
if (count < )
count = tu.length - ;
tu[count].style.display = "block";
}
//否则向右移动
else
{
count++;
if (count > (tu.length - ))
count = ;
tu[count].style.display = "block";
} }
</script>
JS 操作对象 事件 样式的更多相关文章
- js 操作对象的引用和操作实际对象的区分
JavaScript高级程序设计-第3版-中 有这么一段话: 在操作对象时,实际上是在操作对象的引用而不是实际的对象.为此,引用类型的值是按引用访问的①. ① 这种说法不严密,当复制保存着对象的某个变 ...
- js操作对象
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Node.js自定义对象事件监听与发射
一.Node.js是以事件驱动的,那我们自定义的一些js对象就需要能监听事件以及发射事件.在Node.js中事件使用一个EventEmitter对象发出,该对象在events模块中.它应该是使用观察者 ...
- js 操作对象 记录
js 对象记录一下: let obj_1 = { name : 'james', age : '22', sex: '1' } for ( i in obj_1 ) { console.log(i) ...
- js操作对象属性用点和用中括号有什么不同
书读百遍其义自见 学习<JavaScript设计模式>一书时,学习工厂模式这一章节,发现了对象后使用中括号的情况,如下: var Factory=function(type,content ...
- js操作对象属性值为字符串
今天在项目开发中遇到一个没遇到过的问题,这个问题是需要对比两个对象a和b,a是一个只有一个属性的对象,b是一个含有多个属性对象,如果b中包含和a一模一样的属性名和值,则把这个一样的属性和值从b中删除了 ...
- js 操作对象的小技巧
来源:https://www.w3cplus.com/javascript/javascript-tips.html 1.使用...运算符合并对象或数组中的对象 同样使用ES的...运算符可以替代人工 ...
- js操作css样式，null和undefined的区别？
1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...
- javascript对象事件绑定方法
javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...
随机推荐
- XAMPP打不开Apache服务的解决办法
XAMPP打不开Apache服务的解决办法 不用修改设置,应该是80端口被占用了,直接先IIS的网站给停了就OK
- Cube 数据 与 DW 数据对应不上
场景: 时间维度表:字段(日期) 收费事实表:字段(金额,收费日期,就诊编号) 管理:使用维度表的 日期字段与事实表的 收费日期字段 进行关联,建立多维度数据集. 问题: DW : 9月份 ...
- 微信小程序开发之页面跳转并携带参数
接口: wx.navigateTo({url:......}) 保留当前页面,跳转到应用内指定URL页面,导航栏左上角有返回按钮 wx.redirecTo({url:.....}) 关 ...
- Maven使用阿里云公共仓库
https://help.aliyun.com/document_detail/102512.html?spm=a2c40.aliyun_maven_repo.0.0.3618305449xZaK
- 强大的在线web编辑器UEditor
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码. UEditor在线演示地址:http://u ...
- Educational Codeforces Round 18D(完全二叉树中序遍历&lowbit)
题目链接:http://codeforces.com/contest/792/problem/D 题意:第一行输入n, q,分别表示给出一颗n个节点的中序遍历满二叉树,后面有q个询问; 接下来有q组形 ...
- ubuntu 14.04 源码编译postgresql
环境 ubuntu 14.04 桌面版 postgresql 源码下载链接,本教程是使用postgresql 9.3.4 进行编译的 http://www.postgresql.org/ftp/sou ...
- 茅台【思维/数学/剪枝】By cellur925
题目传送门 给你\(n\)根木棍,问有多少种方法,使得选出的三根木棍能组成三角形. 开始想要用搜索的,但是写着写着卡壳了(?),于是改用贪心,开始对拍,觉得很稳,只是最后两个数据可能有点卡.很第一题难 ...
- Centos 7.x 安装 MongoDB
官方安装资料:点击直达 本次以Centos为安装主机 1:首先先导入MongoDB的yum源,因为Centos默认是没有MongoDB的yum源,创建文件:/etc/yum.repos.d/mongo ...
- gns3 拖出设备显示一个红色的s，无法启动虚拟设备
通过view-docks-调出console窗口,显示错误信息: Error while creating project: Can't connect to server http://172.0. ...