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 ...
随机推荐
- 大数据 云计算 AI
- linux命令：wc命令
Linux系统中的wc(Word Count)命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 1．命令格式: wc [选项]文件... 2．命令功能: 统计指定文件中的字节数. ...
- supervisor简明教程
一.supervisor是什么 Linux的后台进程运行有好几种方法,例如nohup,screen等,但是,如果是一个服务程序,要可靠地在后台运行,我们就需要把它做成daemon,最好还能监控进程状态 ...
- 7 二分搜索树的原理与Java源码实现
1 折半查找法 了解二叉查找树之前,先来看看折半查找法,也叫二分查找法 在一个有序的整数数组中(假如是从小到大排序的),如果查找某个元素,返回元素的索引. 如下: int[] arr = new in ...
- AtCoder Regular Contest 061 E - すぬけ君の地下鉄旅行【最短路】
具体题解又要搬大哥的了,嘿嘿~ 请点击:G点我 这道题目的难点就是同一家公司的路直接走不需要再花费,然后多了一个公司这个东西,这个不像是边的副权值(瞎说的)之类的东西,这是对于路来说的,路的属性... ...
- Codevs 1570 去看电影
1570 去看电影 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 农夫约翰带着他的一些奶牛去看 ...
- 洛谷CF895C Square Subsets（线性基）
洛谷传送门 不知道线性基是什么东西的可以看看蒟蒻的总结 题意: 给你n个数,每个数<=70,问有多少个集合,满足集合中所有数相乘是个完全平方数(空集除外) 题解: 完全看不出这玩意儿和线性基有什 ...
- Java | 基础归纳 | 随机数应用
Java中一般有两种随机数,一个是Math中random()方法,一个是Random类. Math.random();//返回0~1的中随机数值 Random random = new Random( ...
- 【aspnetcore】使用TagHelper制作分页组件
自定义TageHelper并不难,只要记住几个点: 继承TagHelper 定义需要在TagHelper中传入的参数,如果不需要参数,可忽略 重写Process方法 在Process中拼接要输出的HT ...
- 转 OUI and OPatch Do Not Recognize JDK/JRE on Windows
issue 1: 新覆盖的opatch 提示,无法opatch 报错 此时不应有1.6 D:\app\Administrator\product\11.2.0\dbhome_1\OPatch\ocm\ ...