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 ...
随机推荐
- 2.CSS 颜色代码大全
确实使用,不用重复造轮子了!!! 摘自:http://www.cnblogs.com/circlebreak/p/6140602.html
- Ubuntu 安装Guake
一款代替终端的软件, 只需按F12就可以调出终端, 再按就消失, 附上Github链接. https://github.com/Guake/guake 一开始没安装上去, 后来成功, 现在用着还不错, ...
- 在调试javascript的时候，要常使用alert()
在调试javascript的时候,要常使用alert()会帮助我们定位脚本错误.
- UVa 1349 Optimal Bus Route Design (最佳完美匹配)
题意:给定一个有向图,让你找出若干个图,使得每个点恰好属于一个圈,并且总的权和最小. 析:每个点都有唯一的一个圈,也就是说每一点都有唯一的后继,那么我们就可以转换成求一个图的最小权的最佳完全匹配,可以 ...
- [教程心得] Flash AIR 调用exe/bat且可以传参
Flash AIR 如何调用exe/bat?并且有些情况下需要传参,如何传参呢? 看下面例子: cmd传参打开系统软键盘(参考http://bbs.9ria.com/thread-181265-1-1 ...
- 201621123016 《Java程序设计》第九周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 1. List中指定元素的删除(题集题目) 1.1 实验总结.并回答:列举至 ...
- Solve Tree Problems Recursively
"Top-down" Solution Here is the pseudocode for the recursion function maximum_depth(root, ...
- [Xcode 实际操作]二、视图与手势-(10)UITapGestureRecognizer手势之单击
目录:[Swift]Xcode实际操作 本文将演示使用视图的手势功能,完成视图的交互操作. import UIKit class ViewController: UIViewController { ...
- PAT甲级——1123 Is It a Complete AVL Tree （完全AVL树的判断）
嫌排版乱的话可以移步我的CSDN:https://blog.csdn.net/weixin_44385565/article/details/89390802 An AVL tree is a sel ...
- android webview 视频相关
//设置为false则可以自动播放页面音视频 页面必须设置autoplay或者调用document.getElementById("video").play(); $(" ...