首页 > 代码库 > DOM学习控件定位和案例
DOM学习控件定位和案例
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="http://www.mamicode.com/单位" id="1" style="width:50%" /><br />24 <input type="button" value="http://www.mamicode.com/获取单位长度" onclick="alert(document.getElementById(‘1‘).style.width)" /><br />25 <input type="button" value="http://www.mamicode.com/设置单位长度" onclick="document.getElementById(‘1‘).style.width=‘50px‘" />26 <input type="button" value="http://www.mamicode.com/加宽50" onclick="increWidth()" />27 <input type="button" value="http://www.mamicode.com/定位" style="position:fixed;bottom:200px;right:200px;" />28 <div id="fly" style="position:absolute">29 <img src="http://www.mamicode.com/images/front.jpg" width="100" height="120" />30 </div>31 </body>32 </html>
DOM学习控件定位和案例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。