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

 <html><!--制作一个会跟着鼠标走的图像，还有控件定位的案例-->

 <head>

     <title>document practise</title>

     <script type="text/javascript">

         //document.onclick=function(){alert("点击网页了！");}

         function increWidth() {

             var oldwidth = document.getElementById("1").style.width;

             oldwidth = parseInt(oldwidth) + 50;

             document.getElementById("1").style.width = oldwidth.toString() + "px";

         }

         document.onmousemove = function () {

             var x = window.event.clientX;

             var y = window.event.clientY;

             var divfly = document.getElementById("fly");

             //if (!divfly) return;

             divfly.style.left = x.toString()+"px";

             divfly.style.top= y.toString()+"px";

         }

     </script>

 </head>

 <body>

     <input type="button" value="单位" id="1" style="width:50%" /><br />

     <input type="button" value="获取单位长度" onclick="alert(document.getElementById('1').style.width)" /><br />

     <input type="button" value="设置单位长度" onclick="document.getElementById('1').style.width='50px'" />

     <input type="button" value="加宽50" onclick="increWidth()" />

     <input type="button" value="定位" style="position:fixed;bottom:200px;right:200px;" />

     <div id="fly" style="position:absolute">

         <img src="../images/front.jpg" width="100" height="120" />

         </div>

 </body>

 </html>

DOM学习控件定位和案例的更多相关文章

  1. 【WEB自动化测试之控件定位】基于HTML5控件的唯一控件属性定位

      一.WEB控件定位是什么 要想弄懂这个问题,我们还是基于实践来学习.我们先来看一条入门级别自动化测试用例的构成. DemoCase:正确用户名和密码登录博客园,登录成功 URL: https:// ...

  2. App控件定位

    本文将分享Android相关基础知识和Android APP控件定位工具的使用方法. Android基础知识 Android布局 Android是通过容器的布局属性来管理子控件的位置关系(iOS去掉了 ...

  3. 转载:Robotium之Android控件定位实践和建议(Appium/UIAutomator姊妹篇)

    来源于:http://blog.csdn.net/zhubaitian/article/details/39803857 1. 背景 为保持这个系列的一致性,我们继续用SDK自带的NotePad实例应 ...

  4. Robotium之Android控件定位实践和建议(Appium/UIAutomator姊妹篇)

    本人之前以前撰文描写叙述Appium和UIAutomator框架是怎样定位Android界面上的控件的. UIAutomator定位Android控件的方法实践和建议 Appium基于安卓的各种Fin ...

  5. 【转】Appium基于安卓的各种FindElement的控件定位方法实践

    原文地址:http://blog.csdn.net/zhubaitian/article/details/39754041#t11 AppiumDriver的各种findElement方法的尝试,尝试 ...

  6. Appium基于安卓的各种FindElement的控件定位方法实践和建议

    AppiumDriver的各种findElement方法的尝试,尝试的目标应用是SDK自带的Notepad应用. 1. findElementByName 1.1 示例 el = driver.fin ...

  7. Java Me-List控件的用法案例

    /** * Java Me-List控件的用法案例 */package com.xushouwei.cn; import java.io.IOException;import javax.microe ...

  8. appium简明教程（10）——控件定位基础

    狭义上讲,UI级的自动化测试就是让机器代替人去点来点去的过程. 但机器去点什么(点上面还是点左边),怎么点(是长按还是轻触),这些东西是必须由代码的编写者所指示清楚的. 控件定位就是解决机器点什么的问 ...

  9. Atitit gui控件定位解决方案

    Atitit gui控件定位解决方案 1.1. 但是AUTOIT没有找图功能..可以请大侠们写一份这个UDF出来吗?1 1.2. ahk1 1.3. Java +opencv 模板匹配2 1.1. 但 ...

随机推荐

  1. 几个常见移动平台浏览器的User-Agent

    之前介绍的手机站跳转url的一片文稿中提到,依据User Agent判断终端的方法.(文章地址:http://www.cnblogs.com/dereksunok/p/3664169.html ) 若 ...

  2. Grid 网格布局

    CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统. 这是一个二维系统,这意味着它可以同时处理列和行,不像 flexbox 那样主要是一维系统. 你可以通过将CSS规则应用于父元素 ...

  3. Python入门（5）

    导览: 函数 集合 迭代器与生成器 模块 一.函数 只要学过其他编程语言应该对函数不太陌生,函数在面向过程的编程语言中占据了极重要的地位,可以说没有函数,就没有面向过程编程,而在面向对象语言中,对象的 ...

  4. tomcat 运行机制

    先不去关技术细节,对一个servlet容器,我觉得它首先要做以下事情:1:实现Servlet api规范.这是最基础的一个实现,servlet api大部分都是接口规范.如request.respon ...

  5. es6从零学习（二）：promise

    es6从零学习(二):promise 一:promise的由来 某些情况下,回调嵌套很多时,代码就会非常繁琐,会给我们的编程带来很多的麻烦,这种情况俗称——回调地狱.由此,Promise的概念就由社区 ...

  6. 图的遍历——DFS（邻接矩阵）

    递归 + 标记 一个连通图只要DFS一次,即可打印所有的点. #include <iostream> #include <cstdio> #include <cstdli ...

  7. js 拼接字符串时，本来想要’#1′ ，返回的却是’#01′

    今天在操作一个元素时,id值是拼接的. var index = $(this).attr(‘index’);    //0var id = ‘#’ + (index+1);    //#01$(id) ...

  8. 团队作业7——第二次项目冲刺（Beta版本)-第二篇

    1.工作分工: 团队成员 分工 郭达22120 项目整合,后台代码 刘德培44060 数据库模块 石浩洋22061 前台界面优化 曾繁钦22056 前台界面优化.测试 孙斌22030 后台代码 2.燃 ...

  9. C#之WCF入门1—简单的wcf例子

    第一步:创建一个空的解决方案,新建一个WCF服务应用程序项目(使用默认名字) 来模拟服务端,新建一个控制台应用程序项目(名称改为 ConsoleApp)来模拟客户端. 第二步:简单分析WcfServi ...

  10. 织梦CMS建站入门学习（二）

    织梦建站的数据库设计: 1.模型表:根据网站的需求,建立不同的数据模型,如:文章浏览,软件下载,视频观看等等. 2.栏目表:根据网站的需求,建立不同的栏目,每一个栏目选择一个数据模型. 3.内容主表: ...