JS 操作对象 事件 样式

时间：2023-03-09 09:02:40
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>

相关文章