JavaScript之属性操作及小例子

时间：2019-01-03 14:05:14 阅读：208 评论：0 收藏：0 [点我收藏+]

标签：tran family ext 点击 inpu body 详解 charset 移动

一.属性操作示例代码

代码详解:

首先要知道,html找标签是通过选择器,JavaScript寻找标签是通过,例:

document.getElementById(‘box‘);
可这么理解:在文档下寻找通过id标签获取元素

所以,下面两行代码可理解为:声明变量=后面接收通过box标签获得span区域元素,通过ul标签获得ul区域元素

var box=document.getElementById(‘box‘);
     var ul=document.getElementById(‘ul‘);
接下来就可以通过变量名进行属性操作:鼠标经过box变量(对应box标签=span元素区),修改ul变量(对应ul标签=ul元素区域)可见
     box.onmouseover=function(){
         ul.style.opacity=1;
     };
鼠标离开span元素区域,ul元素区域不可见
     box.onmouseout=function(){
         ul.style.opacity=0;
     }
上诉操作原理:相当于在样式表中对应选择器中添加了函数中的样式(具体自己试验,打开控制台,鼠标经过时查看对应选择器样式中是否增添了函数样式)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>属性操作</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10             list-style: none;
11         }
12         #box{
13             width: 200px;
14             margin: 0 auto;
15             /*下面两行被子级元素继承*/
16             font: 15px;
17             font-family: "simhei";
18         }
19         #span{
20             /*宽72px,高26px*/
21             display: inline-block;
22           width: 70px;
23            height: 24px;
24            border: 1px solid gray;           
25             text-align: center;
26             /*行高和高度一致则垂直居中*/
27             line-height: 24px;
28         }
29         #ul{
30             /*宽72px,高106px*/
31            width: 70px;
32            height: 104px;
33            border: 1px solid gray;
34            margin-top: 3px;
35            line-height: 25px;
36            text-align: center;
37            transition: 0.5s;
38            opacity: 0;
39         }
40         #ul li:hover{
41           background: blue;
42         }
43     </style>
44 </head>
45 <body>
46     <div id="box">
47         <span id="span">设置</span>
48         <ul id="ul">
49             <li>搜索设置</li>
50             <li>高级设置</li>
51             <li>关闭预测</li>
52             <li>搜索历史</li>
53         </ul>
54     </div>
55 </body>
56 </html>
57 <script type="text/javascript">
58     /*
59     当鼠标移入到span元素区的时候,让ul显示出来
60     html的属性操作
61           display
62           opacity
63           height
64           width
65           visibility
66           ......
67      */
68     var box=document.getElementById(‘box‘);
69     var ul=document.getElementById(‘ul‘);
70 
71     box.onmouseover=function(){
72         ul.style.opacity=1;
73     };
74     box.onmouseout=function(){
75         ul.style.opacity=0;
76     }
77 </script>

初始效果:

技术分享图片

鼠标经过span元素区:

技术分享图片

鼠标移除还原

二.属性操作小例子

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>属性操作小例子</title>
 6     <style type="text/css">
 7      #box{
 8          width: 100px;
 9          height: 100px;
10          background: purple;
11          position: relative;
12          left: 0; top: 0;
13          margin-top: 20px;
14          transition: 1s;
15      }
16     </style>
17 </head>
18 <body>    
19         <input type="button" value="按钮1" id="btn1">
20         <input type="button" value="按钮2" id="btn2">
21         <input type="button" value="按钮3" id="btn3">
22         <input type="button" value="按钮4" id="btn4">
23     <div id="box"></div>
24 </body>
25 </html>
26 <script type="text/javascript">
27     /*变量控制div元素区域和相应按钮元素区域*/
28     var box=document.getElementById(‘box‘);
29     var 变宽=document.getElementById(‘btn1‘);
30     var 变高=document.getElementById(‘btn2‘);
31     var 颜色=document.getElementById(‘btn3‘);
32     var 移动=document.getElementById(‘btn4‘);
33     /*鼠标点击事件发生时,增加函数样式到相应选择器的样式表中*/
34     变宽.onclick=function(){
35          box.style.width=‘200px‘;
36     };
37    
38     变高.onclick=function(){
39          box.style.height=‘200px‘;
40     };
41 
42     颜色.onclick=function(){
43          box.style.background=‘gray‘;
44     };
45 
46     移动.onclick=function(){
47         box.style.left=‘200px‘;
48     }
49 </script>