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 操作对象 事件 样式的更多相关文章

  1. js 操作对象的引用和操作实际对象的区分

    JavaScript高级程序设计-第3版-中 有这么一段话: 在操作对象时,实际上是在操作对象的引用而不是实际的对象.为此,引用类型的值是按引用访问的①. ① 这种说法不严密,当复制保存着对象的某个变 ...

  2. js操作对象

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. Node.js自定义对象事件监听与发射

    一.Node.js是以事件驱动的,那我们自定义的一些js对象就需要能监听事件以及发射事件.在Node.js中事件使用一个EventEmitter对象发出,该对象在events模块中.它应该是使用观察者 ...

  4. js 操作对象 记录

    js 对象记录一下: let obj_1 = { name : 'james', age : '22', sex: '1' } for ( i in obj_1 ) { console.log(i) ...

  5. js操作对象属性用点和用中括号有什么不同

    书读百遍其义自见 学习<JavaScript设计模式>一书时,学习工厂模式这一章节,发现了对象后使用中括号的情况,如下: var Factory=function(type,content ...

  6. js操作对象属性值为字符串

    今天在项目开发中遇到一个没遇到过的问题,这个问题是需要对比两个对象a和b,a是一个只有一个属性的对象,b是一个含有多个属性对象,如果b中包含和a一模一样的属性名和值,则把这个一样的属性和值从b中删除了 ...

  7. js 操作对象的小技巧

    来源:https://www.w3cplus.com/javascript/javascript-tips.html 1.使用...运算符合并对象或数组中的对象 同样使用ES的...运算符可以替代人工 ...

  8. js操作css样式，null和undefined的区别？

    1.js操作css的样式 div.style.width="100px"在div标签内我们添加了一个style属性,并设定了width值.这种写法会给标签带来大量的style属性, ...

  9. javascript对象事件绑定方法

    javascript对象事件绑定方法 今天在做对象事件绑定的过程中出现了一点异外情况,由于事件方法是由参数传过来的,需要将当前对象call过去,方便方法体里直接调用this 错误写法 obj.oncl ...

随机推荐

  1. 使用BFG清除git仓库中的隐私文件或大文件

    使用git时间不长,在调机械臂项目的时候,由于对TwinCAT3和vs的机制不太了解,没有添加很好的忽略文件(.gitignore).造成git仓库包含了很多没有用的文件,例如vs的sdf文件,Twi ...

  2. ** Error in `./g2o_viewer': realloc(): invalid pointer:

    问题: defe@defe-Precision-Tower-3620:~/project/Demo/UseG2OforPoseGraph/useg2oforposegraph$ ./g2o_viewe ...

  3. java集合框架之HashCode

    参考http://how2j.cn/k/collection/collection-hashcode/371.html List查找的低效率 假设在List中存放着无重复名称,没有顺序的2000000 ...

  4. Windows下启动停止Oracle11g服务-为解决系统变慢而生

    我们拿Oracle 11g作为例子. 首先在“开始=〉运行”中输入“services.msc”,按回车,进入“服务”控制台, 将 Oracle ORCL VSS Writer Service.Orac ...

  5. C# 选择文件路径，选择文件

    // 选择文件: private string SelectPath() { string path = string.Empty; var openFileDialog = new Microsof ...

  6. LeetCode: 485 Max Consecutive Ones(easy)

    题目: Given a binary array, find the maximum number of consecutive 1s in this array. Example 1: Input: ...

  7. 简单安装与使用composer

    1.下载composer.exe工具,然后进行安装 这一步需要找到你使用的php版本文件 2.windows+r     cmd  输入composer 安装中国镜像,提高使用效率 https://p ...

  8. 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 ...

  9. DP简单问题联系--最长递增子序列+最长公共子序列等

    今天重温了一下dp问题,发现自己两个礼拜不写题目就什么都不会了...心态爆炸,感觉去考试怕是要gg了... 不过今天总结一下写的题目,全部都是基础的dp问题 第一个是 求最长不下降子序列的长度 第一行 ...

  10. Codevs 3134 Circle

    3134 Circle 题目描述 Description 在一个圆上,有2*K个不同的结点,我们以这些点为端点,连K条线段,使得每个结点都恰好用一次.在满足这些线段将圆分成最少部分的前提下,请计算有多 ...