JS 操作对象事件样式

exmyth 阅读：52 2022-09-29 10:02:36 评论：0

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 变大移出的时候便会原位

 1 <head> 
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 3     <title></title> 
 4 <style type="text/css"> 
 5     #aaa {width:100px; 
 6           height:100px; 
 7           background-color:red; 
 8     } 
 9 </style> 
10 </head> 
11 <body> 
12     <div id="aaa"></div> 
13  
14 </body> 
15 </html> 
16 <script type="text/javascript"> 
17     var a = document.getElementById('aaa'); 
18     //移入  变大 
19     a.onmouseover = function () { 
20         a.style.width = "200px"; 
21         a.style.height = "200px"; 
22     } 
23     //移除回到原位 
24     a.onmouseout = function () { 
25         a.style.width = "100px"; 
26         a.style.height = "100px"; 
27     } 
28 </script>

View Code

移入的时候变成蓝色移出的时变成原来的颜色

 1 <style type="text/css"> 
 2     #aaa {width:100px; 
 3           height:100px; 
 4           background-color:red; 
 5     } 
 6 </style> 
 7 </head> 
 8 <body> 
 9     <div id="aaa"></div> 
10  
11 </body> 
12 </html> 
13 <script type="text/javascript"> 
14     var a = document.getElementById('aaa'); 
15     //移入  变大 
16     a.onmouseover = function () { 
17         a.style.backgroundColor = "blue"; 
18     } 
19     //移除回到原位 
20     a.onmouseout = function () { 
21         a.style.backgroundColor = "red"; 
22     } 
23 </script>

View Code

导航栏变色

 1 <style type="text/css"> 
 2     .aaa {width:100px; 
 3           height:100px; 
 4           background-color:red; 
 5           float:left; 
 6           margin-right:10px; 
 7     } 
 8 </style> 
 9 </head> 
10 <body> 
11     <div class="aaa"></div> 
12     <div class="aaa"></div> 
13     <div class="aaa"></div> 
14     <div class="aaa"></div> 
15     <div class="aaa"></div> 
16  
17 </body> 
18 </html> 
19 <script type="text/javascript"> 
20     var a = document.getElementsByClassName('aaa'); 
21     for (var i = 0; i < a.length; i++) 
22     { 
23         //移入的时候变为绿色 
24         a[i].onmouseover = function () { 
25             this.style.backgroundColor = "green";//这里的this代表移入哪个div 代表的哪个div   
26                                                   //就是a[i]  不过i在function函数里面不是那个索引了  是长度了所以用this 
27         } 
28         //移出的时候变为红色 
29         a[i].onmouseout = function () { 
30             this.style.backgroundColor = "red";//同上 
31         } 
32     } 
33 </script>

View Code

有导航条

 1 <head> 
 2     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 3     <title></title> 
 4     <style type="text/css"> 
 5         .aaa { 
 6             width: 100px; 
 7             height: 100px; 
 8             background-color: red; 
 9             float: left; 
10             margin-right: 10px; 
11         } 
12  
13         .div2 { 
14             width: 100px; 
15             height: 600px; 
16             background-color: green; 
17             display: none; 
18             float:left; 
19             margin-right:10px; 
20             margin-top:110px; 
21         } 
22     </style> 
23 </head> 
24 <body> 
25     <div class="aaa"> 
26          <div class="div2"></div> 
27     </div> 
28     <div class="aaa"> 
29          <div class="div2"></div> 
30     </div> 
31     <div class="aaa"> 
32          <div class="div2"></div> 
33     </div> 
34     <div class="aaa"> 
35          <div class="div2"></div> 
36     </div> 
37     <div class="aaa"> 
38          <div class="div2"></div> 
39     </div> 
40 </body> 
41 </html> 
42 <script type="text/javascript"> 
43     var a = document.getElementsByClassName('aaa'); 
44     var b = document.getElementsByClassName('div2'); 
45     for (var i = 0; i < a.length; i++) { 
46         //索引 
47         a[i].index = i; 
48         //移入的时候变为蓝色 
49         a[i].onmouseover = function () { 
50             this.style.backgroundColor = "blue";//这里的this代表移入哪个div 代表的哪个div   
51             //就是a[i]  不过i在function函数里面不是那个索引了  是长度了所以用this 
52             b[this.index].style.display = "block"; 
53         } 
54         //移出的时候变为红色 
55         a[i].onmouseout = function () { 
56             this.style.backgroundColor = "red";//同上 
57             b[this.index].style.display = "none"; 
58         } 
59     } 
60 </script>

View Code

上面几个是移入移出的这里在加上点击事件

 1 <head> 
 2     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 3     <title></title> 
 4     <style type="text/css"> 
 5         .aaa { 
 6             width: 100px; 
 7             height: 100px; 
 8             background-color: red; 
 9             float: left; 
10             margin-right: 10px; 
11         } 
12  
13         .div2 { 
14             width: 100px; 
15             height: 600px; 
16             background-color: green; 
17             display: none; 
18             float:left; 
19             margin-right:10px; 
20             margin-top:110px; 
21         } 
22     </style> 
23 </head> 
24 <body> 
25     <div class="aaa"> 
26          <div class="div2"></div> 
27     </div> 
28     <div class="aaa"> 
29          <div class="div2"></div> 
30     </div> 
31     <div class="aaa"> 
32          <div class="div2"></div> 
33     </div> 
34     <div class="aaa"> 
35          <div class="div2"></div> 
36     </div> 
37     <div class="aaa"> 
38          <div class="div2"></div> 
39     </div> 
40 </body> 
41 </html> 
42 <script type="text/javascript"> 
43     var a = document.getElementsByClassName('aaa'); 
44     var b = document.getElementsByClassName('div2'); 
45     for (var i = 0; i < a.length; i++) { 
46         //索引 
47         a[i].index = i; 
48         //点击的时候   变为黑色  导航条显示 
49         a[i].onclick = function () { 
50             //每个导航都变为原来的颜色   导航条隐藏 
51             for(var j=0;j<a.length;j++) 
52             {a[j].style.backgroundColor="red"; 
53             b[j].style.display="none"; 
54             } 
55             this.style.backgroundColor = "black"; 
56             b[this.index].style.display = "block"; 
57         } 
58         //移入的时候变为蓝色 
59         a[i].onmouseover = function () { 
60             if(this.style.backgroundColor!="red") 
61             this.style.backgroundColor = "blue"; 
62         } 
63         //移出的时候变为红色   导航条隐藏 
64         a[i].onmouseout = function () { 
65             if(this.style.backgroundColor!="balck") 
66             { this.style.backgroundColor = "red";} 
67         } 
68     } 
69 </script>

View Code

选项卡

 1 <head> 
 2     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 3     <title></title> 
 4     <style type="text/css"> 
 5         .aaa { 
 6             width: 100px; 
 7             height: 30px; 
 8             background-color: red; 
 9             float: left; 
10             margin-right: 10px; 
11         } 
12  
13         .div2 { 
14             position: absolute; 
15             width: 540px; 
16             height: 330px; 
17             margin-top:33px; 
18             background-color: green; 
19             z-index= 
20         } 
21     </style> 
22 </head> 
23 <body> 
24     <div class="aaa"></div> 
25     <div class="aaa"></div> 
26     <div class="aaa"></div> 
27     <div class="aaa"></div> 
28     <div class="aaa"></div> 
29    <!-- 下面带数字  更更直观看到那一页--> 
30     <div class="div2">111</div> 
31     <div class="div2">222</div> 
32     <div class="div2">333</div> 
33     <div class="div2">444</div> 
34     <div class="div2">555</div> 
35  
36 </body> 
37 </html> 
38 <script type="text/javascript"> 
39     var a = document.getElementsByClassName('aaa'); 
40     var b = document.getElementsByClassName('div2'); 
41     var zend = 20; 
42     for (var i = 0; i < a.length; i++) { 
43         //索引 
44         a[i].index = i; 
45         //点击  打开哪一个导航  就打开那一页选项卡 
46         a[i].onclick = function () { 
47             for (var j = 0; j < a.length; j++) { 
48                 a[j].style.backgroundColor = "red"; 
49             } 
50             this.style.backgroundColor = "black"; 
51             b[this.index].style.zIndex = zend; 
52             zend++; 
53         } 
54         //移入   颜色变为蓝色 
55         a[i].onmouseover = function () { 
56             if (this.style.backgroundColor != "black") 
57                 this.style.backgroundColor = "blue"; 
58         } 
59         //移出   颜色变为原来的颜色  红色 
60         a[i].onmouseout = function () { 
61             if (this.style.backgroundColor == "blue") 
62                 this.style.backgroundColor = "red"; 
63         } 
64     } 
65 </script>

View Code

非自动的大图轮播

 1 <head> 
 2     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 3     <title></title> 
 4     <link href="StyleSheet.css" rel="stylesheet" /> 
 5 </head> 
 6 <body> 
 7     <!--大图轮播总框架--> 
 8     <div class="all"> 
 9         <img class="imga" src="1L.jpg" style="display: block;" /> 
10         <img class="imga" src="2.jpg" /> 
11         <img class="imga" src="3.jpg" /> 
12         <img class="imga" src="4.jpg" /> 
13         <img class="imga" src="5.jpg" /> 
14         <div id="left"><</div> 
15         <div id="right">></div> 
16     </div> 
17 </body> 
18 </html> 
19 <script type="text/javascript"> 
20     var left = document.getElementById("left"); 
21     var right = document.getElementById("right"); 
22     var count = 0; 
23     var tu = document.getElementsByClassName('imga'); 
24     //点击右边 
25     right.onclick = function () { 
26         for (var i = 0; i < tu.length; i++) { 
27             tu[i].style.display = "none"; 
28         } 
29         count++; 
30         if (count > (tu.length - 1)) 
31             count = 0;  
32             tu[count].style.display = "block"; 
33     } 
34     //点击左边 
35     left.onclick = function () { 
36         for (var i = 0; i < tu.length; i++) { 
37             tu[i].style.display = "none"; 
38         } 
39         count--; 
40         if (count < 0) 
41             count = tu.length - 1; 
42         tu[count].style.display = "block"; 
43     } 
44 </script>

View Code

css的

 1 .all { 
 2     position: relative; 
 3     margin-top: 30px; 
 4     margin-left: 10%; 
 5     width: 80%; 
 6     height: 500px; 
 7     background-color: blue; 
 8 } 
 9  
10     .imga{ 
11         position: absolute; 
12         width: 100%; 
13         height: 100%; 
14         display:none; 
15     } 
16  
17 #left { 
18     position: absolute; 
19     left: 10px; 
20     top: 200px; 
21     width: 30px; 
22     height: 100px; 
23     z-index: 1000; 
24     cursor: pointer; 
25     color: white; 
26     font-size: 60px; 
27     line-height:100px; 
28     background-color: black; 
29 } 
30  
31 #right { 
32     position: absolute; 
33     right: 10px; 
34     top: 200px; 
35     width: 30px; 
36     height: 100px; 
37     z-index: 1000; 
38     cursor: pointer; 
39     color: white; 
40     font-size: 60px; 
41     line-height:100px; 
42     background-color: black; 
43 }

View Code

用函数简化点

 1 head> 
 2     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 3     <title></title> 
 4     <link href="StyleSheet.css" rel="stylesheet" /> 
 5 </head> 
 6 <body> 
 7     <!--大图轮播总框架--> 
 8     <div class="all"> 
 9         <img class="imga" src="1L.jpg" style="display: block;" /> 
10         <img class="imga" src="2.jpg" /> 
11         <img class="imga" src="3.jpg" /> 
12         <img class="imga" src="4.jpg" /> 
13         <img class="imga" src="5.jpg" /> 
14         <div id="left"><</div> 
15         <div id="right">></div> 
16     </div> 
17 </body> 
18 </html> 
19 <script type="text/javascript"> 
20     var left = document.getElementById("left"); 
21     var right = document.getElementById("right"); 
22     var count = 0; 
23     var tu = document.getElementsByClassName('imga'); 
24     //点击右边 
25     right.onclick = function () 
26     { 
27         move(1); 
28     } 
29     //点击左边 
30     left.onclick = function () { 
31         move(0); 
32     } 
33  
34  
35     function move(a) { 
36         for (var i = 0; i < tu.length; i++) { 
37             tu[i].style.display = "none"; 
38         } 
39         //如果向左移  那么给a=0 
40         if (a == 0) { 
41             count--; 
42             if (count < 0) 
43                 count = tu.length - 1; 
44             tu[count].style.display = "block"; 
45         } 
46             //否则向右移动 
47         else 
48         { 
49             count++; 
50             if (count > (tu.length - 1)) 
51                 count = 0; 
52             tu[count].style.display = "block"; 
53         } 
54  
55     } 
56 </script>