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

最新推荐文章于 2024-04-04 23:29:42 发布
最新推荐文章于 2024-04-04 23:29:42 发布
阅读量128 收藏
点赞数
文章标签： xhtml javascript ViewUI

这几个属性都是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>

weixin_33810006
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css怎么设置z坐标,CSS 定位（postion、z-index）
weixin_34847632的博客
08-04 2046
CSS 定位CSS有三种基本的定位机制：普通流，浮动，绝对定位(absolute, fixed)：普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，这也是我们最常见的方式，其中 position: static 与 position: relative 属于普通流的定位方式浮动定位机制绝对定位包括 absolute和 fixedposition: static(默认) | ...
理解 CSS 坐标
rose001的专栏
02-11 2741
CSS 用于 Web 页面的布局，布局涉及元素的位置，元素位置必须参照坐标系来确定。CSS 坐标系与数学坐标系不同，它的坐标原点在浏览器可视窗口或元素的左上角，x 轴正方向向右，而 y 轴正方向则向下，如下图所示。CSS 坐标单位包括数值、百分比和相对单位。一个 Web 页面中，不止一个坐标系，而是有多个元素就有多少个体系。以水平选项卡式的导航条为例，下图的效果：使用了下面一张背景
CSS基础（五）——CSS定位
pro1822的博客
03-27 783
CSS基础（五）——CSS定位
css实现坐标点效果
A12536365214的博客
08-01 876
要在CSS中实现坐标点效果，可以使用伪元素和一些CSS样式来创建一个简单的点。属性为空，表示该伪元素没有实际内容。我们将伪元素的宽度和高度设置为2px，并通过。在这个例子中，我们创建了一个具有坐标点效果的CSS样式。整个样式会创建一个小圆点，中心为红色，周围为白色，形成坐标点的效果。等属性的值来调整点的大小和颜色，以适应你的需求。将其向左上角移动一半的宽度和高度，使其居中。属性来使其成为一个圆形点，并设置。元素作为点的容器，通过设置。来创建点的中心部分，使用。将它定位在点的中心，通过。属性来定义点的颜色。
使用Css实现坐标点位效果
SqlloveSyn的博客
03-05 231
【代码】使用Css实现坐标点位效果。
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
10-30
- **event.clientX**: 获取鼠标事件相对于文档的水平坐标。 - **event.clientY**: 获取鼠标事件相对于文档的垂直坐标。 - **event.offsetX**: 获取鼠标事件相对于触发事件的元素的水平坐标。 - **event.offsetY**: ...
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
10-28
在JavaScript中，`top`、`clientTop`、`scrollTop`和`offsetTop`都是用于处理元素位置和滚动状态的属性，它们各自有着特定的用途和含义。理解这些属性的区别对于进行网页布局和动态效果的实现至关重要。 1. `...
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
10-15
在JavaScript中，DOM元素的尺寸和位置是网页布局的关键因素，`offsetWidth`、`clientWidth`、`innerWidth`以及一系列相关属性方法用于获取和处理这些信息。这些属性可以帮助开发者精确地控制页面元素的显示效果，...
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页
10-30
Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性 在Javascript拖拽系列文章中，offsetLeft、offsetTop、offsetWidth、offsetHeight四个属性都是非常重要的，它们都是关于位置定位...
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
05-09
### JS中offsetTop、clientTop、scrollTop、offsetHeight各属性详解 #### 一、概述 在JavaScript中，处理页面布局和滚动效果时经常会用到一些DOM属性，如`offsetTop`、`clientTop`、`scrollTop`和`offsetHeight`等...
前端三剑客 —— CSS （ 坐标问题 、定位问题和图片居中 ）
最新发布
weixin_51562484的博客
04-04 1051
前端三剑客 —— CSS （设置中常见的问题）
css实现坐标点位效果
莫不静好
03-11 985
<html> <body> <style type="text/css"> span { height: 40px; width: 40px; display: block; position: relative; } .demoSpan1 { width: 22px; } .
摄像机标定终极总结版01
小勺挖泰山的博客
07-02 3878
上传技术博客真的挺费时间的，不过为了广大的同胞们能节省更多的时间，自己通过学习书籍《学习opencv》和书籍《机器视觉算法与应用》中有关摄像机标定的内容，现在就在这里总结了一下，方便大家参考。不足之处，大家体谅。毕竟是花费了大半天时间总结的。希望大家多多转发，请标出文章出处。谢谢
JavaScript与CSS — 元素的位置和各种坐标系
热门推荐
千里之外
03-10 1万+
使用位置、尺寸和可见性基本就可以在现代浏览器中模拟绝大多数常见的用户效果了。元素的位置是实现交互效果的基础。在CSS中，元素使用偏移量来定位，它是通过元素到它父元素的左上角的偏移量来计算。CSS的坐标系如下图 页面上的所有元素都有left（水平位置）和top（垂直位置）的偏移量。为了更好理解这一点，先了解一下CSS的定位方式。基础的HTML代码是： p {     b
css 用坐标方式添加图片
yanyueqiu的博客
11-10 2784
在平常的网页开发中，我们常常会加载很多小图片， 一次图片的加载就相当于一次http请求，过多的请求会拖慢网页的访问速度。有时我们会采用css坐标方式加载图片，这样原本需要加载十张小图片就变成了只加载一张图片。 话不多说，先上代码给需要实现功能的小伙伴。 .spanicon { width: 32px; height: 32px; background: url(ht
利用Dreamweaver自身功能,快速准确测绘图片上的元素坐标位置,并快速用到CSS背景坐标设置当中去
11-16 3690
利用DW创建一个站点命名为bgCS,里面Pic文件夹中有一张梅西大图片:messi.jpg: 打算只截取梅西的头部及手部作为盒子的CSS背景图片,最终效果为: 我们并不打算切割图片,可利用DW自带的功能呢,快速获取梅西头部及手部的坐标位置及大小,作为CSS背景图像位置参数使用。那么如何完成呢?这分为以下几个步骤。 第一步:网站中新建一个辅助网页: SizeMeasure.ht
关于offsetTop和clientX和pageX的区别
Talljack 的博客园
10-08 998
$('.con').offset().top;//jq中offset（）是相对于视口 var con = document.getElementsByClassName('con')[0]; // console.log(con.offsetTop);//原生JS中若父级有定位，则相对与父级，若父级无定位，则相对于视口 // console.log(con.offsetWidth);//原生...
scrolltop offsettop clienttop
04-23
这是三种不同的属性，用于获取元素的滚动位置和位置信息。其中，scrollTop用于获取元素的垂直滚动位置；offsetTop用于获取元素相对于其offsetParent元素的垂直距离；clientTop用于获取元素的上边框(border)的宽度。这三个属性通常用于JS操作DOM元素时，用于计算元素的位置和滚动位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值