码迷,mamicode.com
首页 > 其他好文 > 详细

DOM学习控件定位和案例

时间:2014-11-11 22:37:24      阅读:289      评论:0      收藏:0      [点我收藏+]

标签:style   blog   io   color   ar   os   java   sp   div   

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学习控件定位和案例

标签:style   blog   io   color   ar   os   java   sp   div   

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

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