<style type="text/css">

#main{text-align:center; background-color:#9FF; height:600px;width:800px}

#adver{

    position:absolute;

    left:50px;

    top:30px;

    z-index:;

}

</style>

<script src="js/scroll.js"></script>

</head>

<body>

<div id="adver"><img src="data:images/adv.jpg"/></div>

<div id="testDiv" style="position:absolute;left:300px;top:50px;background-color:red; width:80px; height:200px">内部样式的div</div>

<input   type="button"   value="测试内部样式坐标位置" onClick="test('testDiv')"/>

<input   type="button"   value="测试外部样式坐标位置" onClick="test('adver')"/>

<div id="main">网页内容</div>

</body>
function test (divID){

    var divObj=document.getElementById(divID);

    alert("left="+divObj.style.left+"\ntop="+divObj.style.top);  //只能读取style属性设置的值，不能读取其他如：内部样式、外部样式的值

    divObj.style.left=parseInt(divObj.style.left)++"px";

    divObj.style.top=parseInt(divObj.style.top)++"px";

}

动态设置Div坐标的更多相关文章

  1. JavaScript动态设置div的样式的方法

    有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简 ...

  2. 网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js 动态设置 div 背景图片 并滚动显示

    var imgs =["../img/index/bgstyle/style1/index_top_bg2.jpg", "../img/index/bgstyle/sty ...

  4. Js 动态设置DIV日期信息

    HTML代码如下: <div  id="time"> 2013年12月20日 14:49:02 星期五 </div> JS代码如下: window.onlo ...

  5. .net mvc 设置div的动态部分视图内容 dynamic partial view

    示例效果:点击按钮,在div中 显示不同的partial view的内容 $("#btnEdit").click(function () { //动态获取相应的部分视图 var u ...

  6. JavaScript DOM编程基础精华03（动态设置,层的操作,性能问题）

    代码是否需要放置到onload中  //如果js代码需要操作页面上的元素,则将该代码放到onload里面.         //因为当页面加载完毕之后页面上才会有相关的元素 //如果js代码中没有操作 ...

  7. js动态添加Div

    利用JavaScript动态添加Div的方式有很多,在这次开发中有用到,就搜集了一下比较常用的. 一.在一个Div前添加Div <html> <body> <div id ...

  8. 基于Jquery UI的autocompelet改写，自动补全控件，增加下拉选项，动态设置样式，点击显示所有选项，并兼容ie6+

    Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...

  9. <video>标签：视频播放器动态设置src

    HTML代码 <div  id="my_div">    <video id="my_video"  width="600" ...

随机推荐

  1. Java-transient

    transient的作用及使用方法 都知道一个对象只要实现了Serilizable接口,这个对象就可以被序列化,java的这种序列化模式为开发者提供了很多便利,我们可以不必关系具体序列化的过程,只要这 ...

  2. Java基础-内部类

    在Java中,可以将一个类定义在另一个类里面或者一个方法里面,这样的类称为内部类.广泛意义上的内部类一般来说包括这四种:成员内部类.局部内部类.匿名内部类和静态内部类. 下面就先来了解一下这四种内部类 ...

  3. myeclipse 配置weblogic

    1.打开myeclipse,选择Window -> Preferences--->MyEclipse--->servers 2.点击servers---->weblogic-- ...

  4. ORACLE创建表空间、创建用户、更改用户默认表空间以及授权、查看权限

    Oracle创建用户.表空间.导入导出....命令 //创建临时表空间 create temporary tablespace ext_temptempfile 'D:\oracle\product\ ...

  5. Spring JdbcTemplate 的使用与学习(转)

    紧接上一篇 (JdbcTemplate是线程安全的,因此可以配置一个简单的JdbcTemplate实例,将这个共享的实例注入到多个DAO类中.辅助的文档) Spring DAO支持 http://ww ...

  6. 阿里云搭建基于PPTP的VPN（Windows Server 2008）

    由于阿里云在网络上分为两张网卡,一张内网,另一张是外网,所以在搭建PPTP的VPN时需要特殊处理. 实现步骤: 通过以上配置即可拨号成功 下面是通过NFS策略进行控制访问  完成后,即可拨号上网. 下 ...

  7. SQLServer错误：过程 sp_addextendedproperty，第 xxx 行对象无效。'dbo.xxx.xxx' 不允许有扩展属性，或对象不存在。

    上传数据库到虚拟主机,在执行SQL脚本的时候出现以下的错误: 消息 15135,级别 16,状态 8,过程 sp_addextendedproperty,第 37 行 对象无效.'dbo.Messag ...

  8. configure new linux

    vim   http://www.cnblogs.com/wswang/p/5088078.html zsh  sh -c "$(curl -fsSL https://raw.github. ...

  9. javascript设计模式-装饰模式

    装饰模式:在不改变原类(对象)和继承的情况下动态扩展对象功能,通过包装一个对象来实现一个新的具有原对象相同接口的新的对象.在设计原则中,有一条,多用组合,少用继承,装饰模式正是这一原则的体现. UML ...

  10. Mac 鼠须管 合并词库 简单使用

    之前一直没用过合成词库这功能,有个同步用户数据的选项,点它后,生成一个文件夹,里面就有当前的一些配置,词库之类的 /Users/dfpo/Library/Rime/sync 这样我们就得到了一个装着用 ...