DOM学习控件定位和案例

最新推荐文章于 2025-08-15 22:56:20 发布

weixin_30881367

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

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

本文提供了一个HTML和JavaScript的简单案例，展示了如何制作一个图像跟随鼠标移动的效果，并实现了基本的控件定位功能。通过这段代码，读者可以学习到如何使用JavaScript动态改变元素的位置和大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>