首页 > 其他 > 详细

DOM学习控件定位和案例

时间:2014-11-11 22:35:43      阅读:345      评论:0      收藏:0      [点我收藏+]

Dom中有多种定位属性,下面是一个简单案例

 1 <html><!--制作一个会跟着鼠标走的图像,还有控件定位的案例-->
 2 <head>
 3     <title>document practise</title>
 4     <script type="text/javascript">
 5         //document.onclick=function(){alert("点击网页了!");}
 6         function increWidth() {
 7             var oldwidth = document.getElementById("1").style.width;
 8             oldwidth = parseInt(oldwidth) + 50;
 9             document.getElementById("1").style.width = oldwidth.toString() + "px";
10         }
11         document.onmousemove = function () {
12             var x = window.event.clientX;
13             var y = window.event.clientY;
14             var divfly = document.getElementById("fly");
15             //if (!divfly) return;
16             divfly.style.left = x.toString()+"px";
17             divfly.style.top= y.toString()+"px";
18         }
19        
20     </script>
21 </head>
22 <body>
23     <input type="button" value="单位" id="1" style="width:50%" /><br />
24     <input type="button" value="获取单位长度" onclick="alert(document.getElementById(‘1‘).style.width)" /><br />
25     <input type="button" value="设置单位长度" onclick="document.getElementById(‘1‘).style.width=‘50px‘" />
26     <input type="button" value="加宽50" onclick="increWidth()" />
27     <input type="button" value="定位" style="position:fixed;bottom:200px;right:200px;" />
28     <div id="fly" style="position:absolute">
29         <img src="../images/front.jpg" width="100" height="120" />
30         </div>
31 </body>
32 </html>

 

DOM学习控件定位和案例

原文:http://www.cnblogs.com/sytu/p/4090650.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!