盒子 offsetLeft、offsetTop、offsetWidth、getBoundingClientRect等属性解释

最新推荐文章于 2024-09-07 16:09:19 发布
最新推荐文章于 2024-09-07 16:09:19 发布
阅读量188 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/kitebear/p/4685798.html
版权

 offsetLeft

获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最左端这时候不管滚动条移到哪) 当前元素向左的位置 记住它会将margin-left加入计算

 offsetTop

获取的是忽略 margin 当前元素距离上一级父节点(有没有设置position,有的话依据父节点,没有的话依据页面最顶端端这时候不管滚动条移到哪) 当前元素向上的位置 记住它会将margin-top加入计算

 offsetWidth

获取盒子的 宽度+边框+padding+margin的宽度

offsetHeight 同上

 getBoundingClientRect 原生方法

它的width和height 获取情况和offsetWidth，offsetHeight相同。

top 获取的是当元素距离窗口的可视顶点的距离如果超过就为负

left获取的是当元素距离窗口的可视最左侧的距离如果超过就为负

clientWidth 指的是 当前元素的高度+padding的上下边距

clientHeight 指的是 当前元素的宽度+padding的左右边距

 Jquery 的 offset()

left 获取当前元素距离距离document最左侧的距离 包括margin

top 获取当前元素距离距离document最顶点的距离是页面最顶端,到盒子边框>内边距>元素的距离这个距离包括 margin 但是不同于 getBoundingClientRect 的 top

$ele.width 获取当前元素的宽度 不包括 内边距外边框margin

$ele.height 获取当前元素的高度 不包括 内边距外边框margin

 下面是兼容情况，有些版本的浏览器可能不兼容width/height

 

转载于:https://www.cnblogs.com/kitebear/p/4685798.html

weixin_30394669
关注
javascript中offset、client、scroll的属性总结
12-12
- `offsetParent`：此属性返回一个引用，指向`offsetLeft`和`offsetTop`的参考元素，即元素的定位父元素。如果元素没有定位父元素，则返回`null`。 2. **client属性**： - `clientWidth` 和 `clientHeight`：这两...
scrollTop、offsetTop、offsetHeight等相对位置介绍
lyqhn2012的专栏
04-27 757
scrollTop 滚动条相对于其顶部的偏移 offsetTop 返回当前元素上边缘距离offsetParent元素的距离，返回值是数字，单位是像素。 offsetHeight 返回当前元素的高度，包括内边距和边框 event.clientX，event.clientY 相对于浏览器窗口的(x,,y)坐标，不包括工具栏和滚动条 event.pageX， event.pageY 相对于文档的(x,,
es5如何实现promise_JavaScript之API实现
weixin_36296063的博客
12-25 233
有不少刚入行的小白跟我说：“JavaScript 很多 API 记不清楚怎么办？数组的这方法、那方法总是傻傻分不清楚，该如何是好？操作 DOM 的方式今天记、明天忘，真让人奔溃！”甚至有的开发者在讨论面试时，总向我抱怨：“面试官总爱纠结 API 的使用，甚至 jQuery 某些方法的参数顺序都需要让我说清楚！”我认为，对于反复使用的方法，所有人都要做到“机械记忆”，能够反手写出。一些貌似永远记不清...
【无标题】clientWidth、offsetWidth、scrollWidth与getBoundingClientRect
最新发布
jgsecurity的博客
09-07 480
通过调用dom元素的getBoundingClientRect()方法，我们能获得一个对象，这个对象里面记录了这个元素的width、height（当然还有top、bottom等位置信息）。clientWidth、offsetWidth、scrollWidth三种属性尺寸都属于layout tree（布局树）里的尺寸，是静态的，而getBoundingClientRect()方法拿到的尺寸是属于用户最终看到的尺寸。（即元素内容区域的宽度），clientHeight表示某个元素的可见。
使用JSFinder来获取js文件中的api
ct__chengtao的博客
02-21 467
将js文件的链接写入文本文件
前端js调用后端API获取数据的三种方法（2022.7.25）
热门推荐
I have a dream, here my dreams come true!
07-25 4万+
js调用后台API进行http请求的三种方法（get-post)
使用 JavaScript 调用 API
A626796235的博客
10-21 6937
关于 web API 的基本认知
js获取页面控件坐标.pdf
09-27
获取页面控件坐标是 JavaScript 编程中非常重要的一部分，我们可以使用多种方法来获取元素的坐标，包括使用 offsetLeft 和 offsetTop 属性、getBoundingClientRect() 方法和 JavaScript 库等。 此外，在 HTML 文...
js获取元素相对窗口位置的实现代码
10-25
当涉及到页面布局和元素定位时，我们需要理解几个重要的属性：offsetTop、offsetLeft、offsetWidth、offsetHeight、clientWidth、clientHeight、clientTop、clientLeft、getBoundingClientRect。下面我们来详细解释...
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
4. `offsetTop` 和 `offsetLeft`：这两个属性表示元素的左上角（边框外边缘）相对于其最近的定位祖先元素（`offsetParent`对象）左上角的距离。如果没有定位的祖先元素，则返回`null`。 下面是一个示例代码，演示...
js如何调用api接口数据,javascript调用api接口
chatgpt001的博客
11-30 9125
随着云计算分布式微服务技术的发展，现有网络项目大都基于前后端分离的技术手段实施，一方面是便于缓解后台服务器的压力，充分利用各台服务节点的计算和存储资源，尽可能地提高服务器性能；另一方面可提高服务的可靠性、容灾能力，以便在某服务节点上服务器甚至节点崩溃的情况下得以对该服务快速有效地进行替换或恢复，表现为极强的修复能力（注：先进制造技术的发展和充足的材料供应能力使得时间、价格方面的维修成本不断高于替换成本，让废旧品及时得到回收利用再生产，从而减少繁琐的维修过程，以便缩短维修时间，即能换不修原则）。在Web。
JS API 接口接收与返回
10-11
JS API 接口接收与返回 是一个轻型的、安全的、跨网际的、跨语言的、跨平台的、跨环境的、跨域的、支持复杂对象传输的、支持引用参数传递的、支持内容输出重定向的、支持分级错误处理的、支持会话的、面向服务的高性能远程过程调用协议。 该版本直接解压后就可以使用，其中 属于公共文件。不论是客户端还是服务器端都需要这些文件。 是客户端文件，如果你只需要使用客户端，那么只要有上面那些公共文件和这个文件就可以使用了，使用时，直接在你的程序中包含 phprpc_client.php 就可以，公共文件不需要单独包含。 这三个文件是服务器端需要的文件。 其中 dhparams 目录中包含的是加密传输时用来生成密钥的参数 dhparams.php 是用来读取 dhparams 目录中文件的类。 phprpc_server.php 是服务器端，如果你要使用 PHP 来发布 PHPRPC 服务，只需要包含这个文件就可以了。公共文件和 dhparams.php 都不需要单独包含。 PHP 4.3+、PHP 5、PHP 6 客户端要求开启 socket 扩展。 服务器端需要有 IIS、Apache、lighttpd 等可以运行 PHP 程序的 Web 服务器。 如果服务器端需要加密传输的能力，必须要保证 session 配置正确。 <?php include('php/phprpc_server.php'); //加载文件 function hello($name) { return'Hello ' . $name; } $server = new PHPRPC_Server(); //创建服务端 $server->add(array('hello', 'md5', 'sha1')); //数组形式一次注册多个函数 $server->add('trim'); //单一注册 $server->start(); //开启服务 ?> <?php include ("php/phprpc_client.php"); //加载文件 $client = new PHPRPC_Client('http://127.0.0.1/server.php'); //创建客户端 并连接服务端文件 echo$client->Hello("word"); //调用方法 返回 hello word ?> -------------------------------------------------- --------------------------------------------------- ------------------------------ 服务端其他说明: <?php include('php/phprpc_server.php'); //加载文件 function hello($name) { return'Hello ' . $name; } class Example1 { staticfunction foo() { return'foo'; } function bar() { return'bar'; } } $server = new PHPRPC_Server(); //创建服务端 $server->add('foo', 'Example1'); //静态方法直接调用 $server->add('bar', new Example1()); //非静态方法 需要实例化 //注册别名调用 $server->add('hello', NULL, 'hi'); //第三参数是函数的别名 客户端通过别名来调用函数 $server->add('foo', 'Example1', 'ex1_foo'); $server->add('bar', new Example1(), 'ex1_bar'); $server->setCharset('UTF-8'); //设置编码 $server->setDebugMode(true); //打印错误 $server->setEnableGZIP(true); //启动压缩输出虽然可以让传输的数据量减少，但是它会占用更多的内存和 CPU，因此它默认是关闭的。 $server->start(); //开启服务 ?> -------------------------------------------------- --------------------------------------------------- --------------------------- 客户端其他说明: <?php include ("php/phprpc_client.php"); $client = new PHPRPC_Client(); $client->useService('http://127.0.0.1/server.php'); //远程调用地址 $client->setKeyLength(1000); //密钥长度 $client->setEncryptMode(3); //加密等级0-3 $client->setCharset('UTF-8'); //设置编码 $client->setTimeout(10); //设置超时时间 echo$client->hi('PHPRPC'), "\r\n"; //调用函数 echo$client->getKeyLength(), "\r\n"; //下面是返回值 echo$client->getEncryptMode(), "\r\n"; echo$client->getCharset(), "\r\n"; echo$client->getTimeout(), "\r\n"; ?> -------------------------------------------------- --------------------------------------------------- ---------------------- 关于session <?php include('php/phprpc_server.php'); class ExampleCounter { function ExampleCounter() { if (!isset($_SESSION['count'])) { $_SESSION['count'] = 0; } } function inc() { $_SESSION['count'] += 1; } functioncount() { return$_SESSION['count']; } } $server = new PHPRPC_Server(); $server->add(array('inc', 'count'), new ExampleCounter()); $server->start(); ?> <?php include("php/phprpc_client.php"); $client = newPHPRPC_Client(); $client->useService('http://127.0.0.1/1.php'); $client->setTimeout(10); echo $client->inc(); echo $client->count(); echo $client->inc(); echo $client->count(); ?> 每次刷新都是新建的client 服务端并不能识别.
HOW - 优化回流频繁导致的性能开销
weixin_58540586的博客
03-23 825
从重绘和回流的定义来看，回流是性能开销比较大的场景，而且对于会频繁触发回流的页面，性能问题更明显，导致降低渲染速度，从而出现卡顿。
使用 JavaScript 获取和显示 API 数据
我的博客，不一样的自我表达
05-29 410
我们将使用的 API 是TheCocktailDB ，这是一个免费的 API，包含 600 多种鸡尾酒配方，不需要帐户即可访问。然后我们将数据记录到控制台并调用displayCocktail将包含将数据输出为 HTML 的功能的函数。在本教程中，您将学习如何从远程 API 获取数据并将该数据输出到 HTML 页面中。这就是本教程的全部内容，您应该有一个正常运行的网页，显示来自外部 API 的随机鸡尾酒配方。我们现在可以将此数据传递给将其呈现为 HTML 的函数。如果你喜欢我的文章，记得关注获取更多的信息。
获取API接口内容并在前端应用
m0_56090828的博客
06-05 297
API接口的内容：JSON格式的数据。
在JavaScript中使用提取API
weixin_26717681的博客
09-27 1361
Fetch API is one word that i have always heard being thrown around. If you have never had to work with it or do not even know what it means, it seems like something big, something we cannot relate to,...
Vue.js的api的get请求
swq404的博客
07-26 1741
代码 axios .get('https://abc.xyz/api/abcd.php', {//是get请求的地址 params: { var1: 1 , var2: 2 //get请求携带的参数 } }) .then(response => (this.getdata = response.data))//把返回数据存到Vue.js类内的getdata变量中 .catch(function(error) {
Usb接口案例分析
weixin_45511599的博客
09-19 1092
废话不多说，直接上代码 public interface Usb { //创建Usb接口 public abstract void open(); //构造开机抽象方法 public abstract void close(); //构造关机抽象方法 } public class Mouse implements Usb { //接口实现类 @Override public void open() {
JavaScript通过API调取信息，AJAX请求，局部刷新
weixin_51982436的博客
10-17 1125
（个人的学习笔记，代码注释比较详细，可能废话也比较多）AJAX是网页异步刷新、局部刷新AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
getBoundingClientRect canvas
07-13
`getBoundingClientRect()` 是一个用于获取元素的边界框的方法，它返回一个包含元素的位置...如果需要获取相对于文档的坐标和尺寸信息，可以使用 `offsetLeft`、`offsetTop`、`offsetWidth` 和 `offsetHeight` 等属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值