JavaScript之属性操作及小例子
一.属性操作示例代码
代码详解:
首先要知道,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>
初始效果:
点击第一个按钮:
点击第二个按钮:
点击第三个按钮:
点击第四个按钮:
