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 ...
随机推荐
- Flexpaper二次开发入门教程》(十) Flexpaper简单使用-第一个Flexpaper例子
4. Flexpaper简单使用 通过上面三章的内容,大家对Flexpaper.SWFTools应该有大概的了解了,SWF文件也已经生成了,我们开始进入Flexpaper的使用的介绍. 本章中只演示F ...
- junit4 Assert静态方法及API
junit中的assert方法全部放在Assert类中. 1.assertTrue/False([String message,]boolean condition); 用来查看变量是是否为fa ...
- error: declaration of 'cv::Mat R ' shadows a parameter
变量被覆盖. 例: void pose_estimation_2d2d::_pose_estimation_2d2d(const vector<KeyPoint> &v_keypo ...
- sql语句之正则表达式
select * from employee where name regexp '^jin' select * from employee where name regexp '^jin.*(g|n ...
- Flutter实战视频-移动电商-61.购物车_商品数量的加减操作
61.购物车_商品数量的加减操作 provide/cart.dart pages/cart_page/cart_count.dart 先引入provide和cartProvide 定义接收一个item ...
- Gym 100851E Easy Problemset (水题，模拟)
题意:给定 n 个裁判,然后每个都一些题目,现在要从每一个按顺序去选出 k 个题,并且这 k 个要按不递减顺序,如果没有,就用50补充. 析:就按他说的来,直接模拟就好. 代码如下: #pragma ...
- Java字节码指令收集大全
Java字节码指令大全 常量入栈指令 指令码 操作码(助记符) 操作数 描述(栈指操作数栈) 0x01 aconst_null null值入栈. 0x02 iconst_m1 -1(int)值入栈. ...
- git commit 提交不了 error: pathspec 'project'' did not match any file(s) known to git.
1. 问题--使用git将代码提交到码云,使用到以下命令时: git commit -m 'init project' # 报错 error: pathspec 'project'' did not ...
- bzoj 2039: [2009国家集训队]employ人员雇佣【最小割】
一开始在https://www.cnblogs.com/lokiii/p/10770919.html基础上连(i,j,b[i][j])建了个极丑的图T掉了--把dinic换成isap勉强能卡过 首先因 ...
- 如何找出nginx配置文件的所在位置？
对于一台陌生的服务器或安装太久忘了位置,怎么才能简单快速的找到配置文件的位置呢?要找出配置文件的位置,需要先找出nginx可执行文件的路径 , 这里有几种方法: 1.如果程序在运行中 ps -ef | ...