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 ...
随机推荐
- Redis配置主从架构，实现读写分离
Redis的主从架构,能帮助我们实现读多,写少的情况,下面配置Redis架构,很简单. 准备环境 vmware + rhel-server-7.0(101,102,103)+redis-3.2.0 1 ...
- bzoj2159
树形dp+第二类斯特林数 又是这种形式,只不过这次不用伯努利数了 直接搞肯定不行,我们化简一下式子,考虑x^n的组合意义,是把n个物品放到x个箱子里的方案数.那么就等于这个i=1->n,sigm ...
- 五、hibernate在myeclipse中生成实体和映射
- 四、Chrome开发者工具详解(4)-Profiles面板
摘自: http://www.cnblogs.com/charliechu/p/6003713.html
- 最新sublimetext3080注册
----- BEGIN LICENSE -----K-20Single User LicenseEA7E-9401293A099EC1 C0B5C7C5 33EBF0CF BE82FE3BEAC216 ...
- CSS3 制作魔方 - 形成魔方
道路千万条,安全第一条! 魔方结构解析 从魔方的外观来看,可以有多种方式来表达它的组成,从而也有多种方式来形成一个魔方.如: 由六个面组成 由若干层组成 由多个方块组成 无论哪种方式,都可以制作魔方. ...
- MFC中CArray类原理及其应用
1.CArray类应用 函数简介CArray::GetSize int GetSize( ) const;取得当前数组元素个数. CArray::GetUpperBound int GetUpperB ...
- Lightoj1084【DP啊DP】
题意: 给你n个人的位置,每个人最多移动k个单位,然后在某点>=3人可以抱团,问你这n个人最少抱团数,只要有一个n不能抱团输出-1: 思路: 感觉又是超级超级狗血.... 剪不断,理还乱... ...
- 小程序隐藏或自定义 scroll-view滚动条
css 隐藏滚动条 ::-webkit-scrollbar { width:; height:; color: transparent; } 自定义滚动条样式 ::-webkit-scrollbar ...
- TopJUI通过简单的代码实现复杂的批量提交功能
业务系统的批量提交是常用的操作功能,使用传统的EasyUI开发时需要写不少代码才能实现,该功能在TopJUI中是如何实现的呢?本篇我们将通过简单的代码,把批量操作的具体实现分享给大家参考. <a ...