当前位置: 首页 > 编程日记 > 正文

offsetTop,clientX,clientTop,clientWidth,offsetWidth 坐标,一次弄明白

这几个属性都是IE火狐完全兼容的,不多说,看我测试结果便知:

【源码如下】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

<script type="text/javascript">
        function Position(eve) {
            var t = document.getElementById("div1");
            var e = eve || event;
            var DivOffsetTop = t.offsetTop; //=Top+MarginWidth=100+3=103
            var DivOffsetleft = t.offsetLeft; //Left+MarginWidth=50+3=53
            var EventTop = e.clientY;
            var EventLeft = e.clientX;
            var DivTop = t.style.top;
            var DivLeft = t.style.left;
            var DivClientTop = t.clientTop; //BorderWidth
            var DivClientLeft = t.clientLeft; //BorderWidth
            var DivClientWidth = t.clientWidth; //Width+2PaddingWidth=200+2*11=222
            var DivClientHeight = t.clientHeight; //Height+2PaddingWidth=300+2*11=322
            var DivOffsetWidth = t.offsetWidth; //=2BorderWidth+Width+2PaddingWidth=2*7+200+2*11=236
            var DivOffsetHeight = t.offsetHeight; //=2BorderWidth+Height+2PaddingWidth=2*7+300+2*11=336
            var BodyClientTop = document.body.clientTop;
            var BodyClientLeft = document.body.clientLeft;
            var DivWidth = t.style.width;
            var DivHeight = t.style.height;
            var DivBorderWidth = t.style.borderWidth;
            var DivPaddingWidth = t.style.padding;
            var DivMaginWidth = t.style.margin;
            var R = "DivOffsetleft:" + DivOffsetleft + "--DivOffsetTop:" + DivOffsetTop; //103 53
            R += "\nEventLeft:" + EventLeft + "--EventTop:" + EventTop; //>=103 >=53
            R += "\nDivLeft:" + DivLeft + "--DivTop:" + DivTop; //100px 50px
            R += "\nDivClientLeft:" + DivClientLeft + "--DivClientTop:" + DivClientTop; //7 7
            R += "\nBodyClientLeft:" + BodyClientLeft + "--BodyClientTop:" + BodyClientTop; //5 5
            R += "\nDivClientWidth:" + DivClientWidth + "--DivClientHeight:" + DivClientHeight; //222 322
            R += "\nDivWidth:" + DivWidth + "--DivHeight:" + DivHeight; //200 300
            R += "\nDivOffsetWidth:" + DivOffsetWidth + "--DivOffsetHeight:" + DivOffsetHeight; //236 336
            R += "\nDivBorderWidth:" + DivBorderWidth //7px
            R += "\nDivMaginWidth:" + DivMaginWidth //3px
            alert(R);
        }
    </script>

</head>
<body>
    <input type="button" id="btn" value="测试位置" />
    <br />
    <div id="div1"line-height: normal; ">         top: 50px; left: 100px; border: 7px solid red; padding: 11px; margin: 3px;" οnmοusedοwn="Position(event)">
        这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容
        这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容
        这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容 这是文章内容
    </div>
</body>
</html>

转载于:https://www.cnblogs.com/top5/archive/2011/03/06/1972368.html

相关文章:

各小组对于自己产品的预期“软件下载/用户人数”

组号 预期下载/用户人数Team1 100Team2 1000Team3 30下载&#xff0c;20篇博客引用Team4 1000Team5 3000Team6 100Team7 600Team8 1000下载&#xff0c;50个搜索结果引用Team9 300Team10 500在产品发布之后&#xff0c;再比照这个期望值&…

DB2 9 使用拓荒(733 检讨)认证指南,第 2 部分: DB2 数据操作(6)

学习根柢根底观观点操作游标游标措置概述在本节中&#xff0c;您将更进一步看到若安在嵌入式 SQL 使用次第中运用游标。异常&#xff0c;根柢根底的步骤照旧是声明、翻开、获取、更新/删除&#xff08;可选&#xff09;和封闭。为了赞助看法游标的观观点&#xff0c;假定 DB2 构…

判断字符串有无汉字

判断字符串是否全为汉字 1 String str1 "java判断是否为汉字" 2 String str2 "全为汉字" 3 String reg "[\\u4e00-\\u9fa5]" 4 boolean result1 str1.matches(reg)//false 5 boolean result2 str2.matches(reg)//true 提取字符串中…

获取指定字符的宽度

https://www.cnblogs.com/gaodu2003/archive/2009/06/12/1502242.html 方法一&#xff1a;var CharX, CharY: Integer;with Canvas do begin Font.Name : 宋体; Size : 9; CharX : TextExtent(字符串).cx; //字符串宽度&#xff0c;单位为像素 CharY : TextExtent(字符…

选课微信小程序开发 java

1.使用技术 javaspringbootmysqlhibernate微信小程序 2.功能介绍 后台管理 学生管理课程管理类型管理选课管理操作中心管理员中心导入导出学生微信小程序端 学生端 查看课程选课查看选课课程表个人中心管理员 查看课程新增课程用户管理课程类型管理管理员中心 3.系统功能展示…

危险进程大集合咯!(吐血推荐)

一般电脑中都有20-33个进程在后台运行着。有的占用了太多的系统资源&#xff0c;造成机器运行缓慢。更为不幸的是&#xff0c;一些进程是间谍软件和***&#xff0c;如此你的隐私和机器的控制权会被***所掌控。 不安全风险进程A 180ax.exe 是注册为TROJ.ISTZONE.H的下载器。这个…

老王Python-进阶篇4-异常处理1.3(周末习题)

一 编写with操作类Fileinfo()&#xff0c;定义__enter__和__exit__方法。完成功能&#xff1a; 1.1 在__enter__方法里打开Fileinfo(filename)&#xff0c;并且返回filename对应的内容。如果文件不存在等情况&#xff0c;需要捕获异常。 1.2 在__enter__方法里记录文件打开的当…

Springboot 日志管理模块编写记录

/**配置类 **/Component Order(value1) public class MyApplicationRunner implements ApplicationRunner{ /*private static final Logger logger LoggerFactory.getLogger(MyApplicationRunner.class);Autowiredprivate MemoryService memoryService; Overridepublic void r…

IEs 4 Linux 新版支撑 IE 7

Toy Posted in AppsIEs 4 Linux 可以让在 Linux 上安插 IE 变成一件异常俭省和高兴的事。昨天发布的 IEs 4 Linux 2.1 beta2 版末尾支撑安插 IE 7 了。不过&#xff0c;需求使用 –beta-install-ie7 的下令行选项来激活。据作者称&#xff0c;在 Linux 安插的 IE 7&#xff0c;…

h3c 3600 acl 配置 滤源IP是网关的ARP报文的ACL规则

h3c 3600 acl 配置 滤源IP是网关的ARP报文的ACL规则 悬赏分&#xff1a;100 - 解决时间&#xff1a;2009-3-8 14:30 星号之间是我在网上查到的华为交换机的配置方法&#xff1a; ************************************************ 全局配置ACL禁止所有源IP是网关的ARP报文 acl…

useradd与adduser的区别

useradd与adduser都是创建新的用户 在CentOs下useradd与adduser是没有区别的都是在创建用户&#xff0c;在home下自动创建目录&#xff0c;没有设置密码&#xff0c;需要使用passwd命令修改密码。 注&#xff1a;有朋友在博客园上回复我说 centos adduser 不创建用户home目录…

入门linux

作者&#xff1a;opmetic 出自: http://www.linuxdiyf.com说到入门linux ,仍是在大二的时辰&#xff0c;由于插手了黉舍的一个比赛举动&#xff0c;是在linux下的一个顺序匹敌&#xff0c;以是在自己的机子上装了一个RedHat9。厥后风闻它没有更新版本了&#xff0c;接着黉舍检…

springboot之异步调用@Async

引言&#xff1a; 在Java应用中&#xff0c;绝大多数情况下都是通过同步的方式来实现交互处理的&#xff1b;但是在处理与第三方系统交互的时候&#xff0c;容易造成响应迟缓的情况&#xff0c;之前大部分都是使用多线程来完成此类任务&#xff0c;其实&#xff0c;在spring 3.…

js将字符串作为函数名调用函数

需求&#xff1a;获取JSON对象的函数名称&#xff0c;并执行该函数。 解决&#xff1a;用eval函数&#xff0c;字符串转换为命令行执行都可以通过eval函数。 计算 JavaScript 字符串&#xff0c;并把它作为脚本代码来执行。 function loadForm(itemCode){for(var i0;i<ITEM…

2010网络营销-电子商务厦门峰会即将开幕

曾几何时&#xff0c;安踏、361度等福建晋江企业通过在央视大规模投放广告使企业的知名度得到迅速提升&#xff0c;产品销量也节节攀升。如今&#xff0c;大批福建企业又把营销的战场转向了互联网&#xff0c;如何在互联网这个营销新战场续写辉煌成了众多福建企业当前最关心的问…

百度前端技术学院js任务三

任务地址&#xff1a;http://ife.baidu.com/course/detail/id/98 代码&#xff1a; 1 <!DOCTYPE>2 <html>3 <head>4 <meta charset"utf-8">5 <title>IFE JavaScript Task 01</title>6 </head>7 <body>8…

开源分布式Job系统,调度与业务分离-如何创建一个计划HttpJob任务

项目介绍&#xff1a; Hangfire&#xff1a;是一个开源的job调度系统,支持分布式JOB&#xff01;&#xff01; Hangfire.HttpJob 是我针对Hangfire开发的一个组件,该组件和Hangfire本身是独立的。可以独立更新Hangfire版本不影响&#xff01; 该组件已被Hangfire官方采纳&#…

小手段:开启 GNOME 的窗口分组效果

Toy Posted in Tips用过 Windows XP 的伴侣除夜要都晓得它有一项分组雷同义务栏按钮的效果&#xff0c;该效果主动将同类窗口的义务按钮折叠为一个单独的按钮&#xff0c;从而无效处置义务栏的窗口拥堵后果。其实&#xff0c;在 Linux 的 GNOME 桌面情况中也有雷同的效果──窗…

MySQL设值自动修改时间

ALTER TABLE form_ylqx ADD update_time TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT 修改时间

[原]不祥的CPU——Alpha

这几天都在捣鼓 Sun Fire V890 小型机&#xff0c;小型机可不像PC服务器那样“不一样的品牌&#xff0c;一样的芯”&#xff0c;不同的品牌的小型机最大的不同当数CPU和OS了&#xff0c;IBM小型机CPU是Power而OS是AIX&#xff0c;HP小型机的CPU是Intel的Itanium而OS是HP-UX&…

Leetcode 764. Largest Plus Sign

思路&#xff1a;动态规划。对于第i行第j列的元素grid[i][j]表示的是这个元素的plus sign的等级&#xff0c;初始化不在mines中的元素对应的grid值为较大值&#xff08;只要大于N/2即可&#xff09;&#xff0c;在mines中的元素对应的grid值为0。不在mines中的元素&#xff0c;…

吴裕雄--天生自然 JAVASCRIPT开发学习:(String) 对象

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body><script> var carname1"Volvo XC60"; var carname2Volvo XC60; var answer1It\s al…

校园音乐点歌平台的设计与开发 微信小程序 点歌系统 java 开发

1、 微信小程序前台展示 2 、 使用到的技术框架 Springbootmavenmybatis网易云相关API 3、 后台展示 项目地址&#xff1a; 项目地址

Tile Racer — 3D 赛车游戏

Toy Posted in Tile Racer 是一款可免用度于 Linux 及 Windows 平台的 3D 赛车游戏。它不只具有十分逼真的效果&#xff0c;并且包罗用来创设新 Maps 的赛道编辑器。玩家可置身于游戏之中足够觉获得赛车的快乐喜爱。Tile Racer 此后最新版本为 0.6&#xff0c;你可以从这里下载…

如何找寻最适合的WEB应用安全解决方案(视频)

51CTO最近举办了一个“拯救网站运维经理赵明”的活动&#xff0c;活动主要讲了一个网站运维经理由于网站被黑而面临失业的故事。其中急需解决的问题&#xff0c;就是如何保护我们的网站。Web应用安全该如何做&#xff1f;怎么才能找到最佳方案&#xff1f;我们就这一主题来采访…

docker 笔记 (6)搭建本地registry

转&#xff1a;http://blog.csdn.net/felix_yujing/article/details/51564739 新版 registry v2对镜像存储格式进行了重新设计&#xff0c;并且和旧版还不兼容。registry v2是由go语言开发&#xff0c;docker从1.6版本开始支持registry v2&#xff0c;之前python开发的老版regi…

2019攻防世界web新手区

robots 看了题目描述&#xff0c;发现与robots协议有关&#xff0c;过完去百度robots协议。发现了robots.txt&#xff0c;然后去构造url访问这个文件 http://111.198.29.45:42287/robots.txt 得到提示&#xff1a;Disallow: f1ag_1s_h3re.php&#xff0c;再次构造url&#xff0…

SSM实现网上商城 有聊天功能

1.项目介绍 实现一个网上商城&#xff0c;商品信息展示&#xff0c;购物车&#xff0c;订单管理&#xff0c;个人中心&#xff0c;商品评价&#xff0c;商品搜索&#xff0c;地址管理&#xff0c;聊天&#xff0c;后台管理&#xff08;商品增删改查&#xff09;&#xff0c;分类…

as3中TextFormat类的使用

在AS3中对TextField进行格式化时可以有三种方法&#xff1a;html标签控制格式css使用TextFormathtml比较方便&#xff0c;但很有限&#xff0c;CSS可以外置维护比较容易&#xff0c;但缺少变化&#xff0c;TextFormat可以复杂多变&#xff0c;只是写起来比较麻烦&#xff0c;并…

pyqt5 使用 QTimer, QThread, pyqtSignal 实现自动执行,多线程,自定义信号触发。

渣渣用法&#xff0c;请等待我心情好的时候更新。 1.第一个例子 1.1 先看mainwindow.py from PyQt5 import QtCore, QtGui, QtWidgetsclass Ui_MainWindow(object):def setupUi(self, MainWindow):MainWindow.setObjectName("MainWindow")MainWindow.resize(640, 320…