码迷,mamicode.com
首页 > 编程语言 > 详细

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>

初始效果:

技术分享图片

点击第一个按钮:

技术分享图片

点击第二个按钮:

技术分享图片

 

点击第三个按钮:

 技术分享图片

 

点击第四个按钮:

 技术分享图片

 

JavaScript之属性操作及小例子

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

原文地址:https://www.cnblogs.com/zjm1999/p/10213613.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!