getBoundingClientRect属性研究

告别过热焦虑:用Ansys Icepak给你的电子设备做个“水冷体检”(附冷板案例全流程) 本文详细介绍了如何利用Ansys Icepak进行电子设备水冷系统的热仿真分析,帮助工程师解决设备过热问题。通过冷板案例全流程演示,展示了从几何处理、材料设定到求解器设置和后处理的关键步骤,提升散热设计效率与准确性。 阅读详情

getBoundingClientRect属性研究

概念

getBoundingClientRect 返回 width、height和下图中的6个属性

请添加图片描述

实测总结:

抓住一个核心点,就是height、width的值:

  • box-sizing 是 content-box时,width和height = 内容+border+padding
  • box-sizing是 border-box时, width和height = 我们设置的width、height

所以:

  • top、left很好算,就是元素到左上角原点的距离
  • bottom、right说白了就是在 top/left的基础上 加上 上面说的 height/width
  • 另外一点需要注意的是:当页面有滚动条时,随着滚动条左右上下滚动,top、bottom、left、right都会跟着变;比如原来的top值是0,页面向上滚动了100px,那么top值就成了 -100

代码实测

box-sizing:content-box时

请添加图片描述

box-sizing:border-box时

请添加图片描述

有滚动条时

请添加图片描述

注意:

在看源码时,经常看到兼容性IE低版本的写法,了解即可,比如看popper.js源码时:

    /**
     * Get bounding client rect of given element
     * @function
     * @ignore
     * @param {HTMLElement} element
     * @return {Object} client rect
     */
    function getBoundingClientRect(element) {
        var rect = element.getBoundingClientRect();

        // whether the IE version is lower than 11
        var isIE = navigator.userAgent.indexOf("MSIE") != -1;

        // fix ie document bounding top always 0 bug
        var rectTop = isIE && element.tagName === 'HTML'
            ? -element.scrollTop
            : rect.top;

        return {
            left: rect.left,
            top: rectTop,
            right: rect.right,
            bottom: rect.bottom,
            width: rect.right - rect.left,
            height: rect.bottom - rectTop
        };
    }
产品需求从场景,初始需求IR,产品需求 OR,设计需求DR,设计规格DS的具体案例说明,以扫地机产品为例 摘要: 以扫地机器人"宠物粪便避障"功能为例,说明从用户场景到产品落地的完整需求转化路径。初始需求(IR)源于养宠家庭痛点,要求100%避障并自动告警;产品需求(OR)转化为≥98%识别准确率等量化指标;设计需求(DR)拆解为感知、决策、执行三大技术模块;最终形成传感器选型(如索尼IMX678)、芯片规格(高通QCS6490)等设计规格(DS)。通过实验室模拟和用户测试验证,该功能使产品溢价30%,养宠家庭购买占比达52%,实现技术与商业价值的统一。 阅读详情

相关推荐

通过PXE的方式实现Ubuntu 24.04 自动安装

之前都是通过PXE来自动化安装Redhat系列的,例如:Rocky9、Rocky10、CentOS7、银河麒麟 Kylin-V10、Kylin-V11、OpenEuler 24.03等。现在安装Ubuntu系列的跟红帽的不太一样,所以在这里介绍下。

邢宇宇的博客 1494

js中getBoundingClientRect()方法详解

一.getBoundingClientRect()分析getBoundingClientRect()获取元素位置,这个方法没有参数getBoundingClientRect()用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。 getBoundingClientRect()是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。 该函数返回一个Object对象,该对象有6个属性:...

汉堡请不要欺负面条 13万+

深入解析SGLang框架:从架构设计到核心组件实现

本文深入解析了SGLang框架的架构设计与核心组件实现。SGLang是一个专为大语言模型推理设计的高效框架,其核心优势在于清晰的分层架构、高效的调度策略以及精细的内存管理。文章详细剖析了其客户端接入、服务器端调度、模型执行引擎及Tokenizer/Detokenizer管理器等关键组件,揭示了其实现高性能推理的内部机制。

coffee的博客 577

超详细分析!!!秒懂getBoundingClientRect()

作用:用来获取元素的位置以及大小相关的信息。是DOM元素的一个方法,返回一个DOMRect对象,包含元素的大小及其相对于视口的位置。bottom:元素底部距离......

weixin_61597234的博客 1万+

UE4/5项目GPU崩溃?可能是Windows的TDR机制在搞鬼!深入浅出聊聊TdrDelay与显卡超时

本文深入探讨了UE4/5项目中GPU崩溃的常见原因,揭示了Windows TDR机制的工作原理及其对渲染进程的影响。通过调整TdrDelay参数和优化GPU负载,提供了解决显卡超时问题的实用方案,帮助开发者提升项目稳定性。

weixin_30691649的博客 411

企业老板管理者,如何监控员工的电脑屏幕?

老板监控员工电脑,需要知道员工开机后的上网行为来及时了解到员工工作情况,及时发现上班不良行为员工,及时淘汰低价值员工。 文章目录iMonitor EAM一、计算机系统日志二、具体功能介绍1.屏幕记录2.键盘记录总结 iMonitor EAM 怎么监控员工电脑,我们需要用到第三方软件,2021年最新版本软件-iMonitor EAM,软件分管理端和客户端,管理端在管理者电脑登录,客户端在员工电脑双击安装就可以,安装中不用任何设置的,客户端安装到员工电脑后也是隐藏的,不会有任何弹窗和警告信息,是无法发现和删

iMonitorSoft的博客 2180

震惊!!!一眼就能看懂的getBoundingClientRect用法!!!

主要介绍getBoundingClientRect的基本属性,以及具体的使用场景和一些需要注意的问题。 getBoundingClientRect Element.getBoundingClientRect() 含义: 方法返回元素的大小及其相对于视口的位置。 值: 返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合。 属性值: top: 元素上边距离页面上边的距离 left: 元素右边距离页面左边的距

m0_52009348的博客 2万+

PLECS中DLL模块的使用

PLECS中DLL模块的使用 之前发布了一篇文章,介绍如何使用PSIM中的DLL模块。而本篇文章的内容与之类似,不过主角换成了PLECS。 PLECS和PSIM类似,也属于电力电子仿真软件,使用方便,仿真速度快,和Matlab也有一定的联系,有兴趣的可以去试试。PLECS可以利用外部动态链接库(DLL)来调用外部的代码参与仿真,方便复杂控制算法的实现,也有利于后期直接将代码移植到硬件控制器上。

OptimisticPoplar的博客 2717

JS | 元素视图方法之getBoundingClientRect()方法详解,秒懂!

在前端开发过程中,我们经常需要获取HTML元素的尺寸和位置信息。getBoundingClientRect()方法就是一个非常重要的工具,它可以帮助我们获取元素的大小及其相对于视口的位置。

青春木鱼的博客 1万+

基于深度学习的CT图像肺结节分割与检测系统[完整代码数据分享]

基于深度学习的CT图像肺结节分割与检测系统[完整代码数据分享]

270

基于 MATLAB 的 FastICA 算法实现语音信号盲分离

FastICA 算法通过最大化信号的非高斯性,找到独立成分,从而实现信号的分离。这些混合的信号被称为盲源信号,我们希望通过分析混合信号,将它们分离出来以便进行进一步的处理和分析。FastICA 是一种常用的盲源信号分离算法,它基于统计学原理,通过寻找独立成分来实现信号的分离。FastICA(独立成分分析)是一种常用的盲源信号分离算法,在语音和图像处理领域都有广泛的应用。本文将介绍如何使用 MATLAB 实现 FastICA 算法来实现语音信号的盲分离,并提供相应的源代码。FastICA 算法原理。

学习使你进步。 2025

getBoundingClientRect().top与offsetTop的区别

返回当前元素相对于 offsetParent(position为非static且距离自己最近的祖先元素) 节点顶部边界的偏移像素值。当监听的是window的滚动条时,元素的getBoundingClientRect().top会原来越小,而offsetTop一直不变。楼层导航,懒加载,返回顶部按钮等等,只要涉及scroll事件,都无法避免的要去计算某个元素距离视窗顶部的距离。且这个距离不随滚动条滚动变化,也就是说这个距离开始是多少就是多少,是个恒定值(包括滚动条卷起的部分)1、监听window的滚动条。

Wangdr的博客 4204

【机器人学】常用的小车底盘运动学模型推导(附C++代码)

认知有限,望大家多多包涵,有什么问题也希望能够与大家多交流,共同成长!本文先对小车底盘运动学模型介绍做个简单的介绍,具体内容后续再更,其他模块可以参考去我其他文章提示:以下是本篇文章正文内容对于小车的分析,仅仅考虑XY轴的线速度和Z轴的角速度,不考虑和横滚和俯仰的速度,【防盗标记–盒子君hzj】也不考虑Z轴的高度变化【即:车底盘的运动可以用三个独立变量来描述:x轴平动、y轴平动、yaw轴转动】

qq_35635374的博客 1932

对getBoundingClientRect属性的研究

1.getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。 .top:元素上边到视窗上边的距离; right:元素右边到视窗左边的距离; bottom:元素下边到视窗上边的距离; left:元素左边到视窗左边的距离; 转载于:https://www.cnblogs.com/zhouyideboke/p...

weixin_30675247的博客 177

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

offsetParent、getBoundingClientRect与其他位置相关属性

写在前面:本文章中的代码演示,默认清除的了 body 和 html 的 margin、padding。 定位父级 Element.offsetParent。 定位父级 offsetParent 是一个只读属性。 该属性返回一个指向最近的(指包含层级上的最近)包含该元素的定位元素或者最近的 table, td, th, body 元素。 <div id="box1"> <div id="box2"> <div id="box3"></div>

wll_web的博客 616

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

getBoundingClientRect()

作用:用来获取元素的位置以及大小相关的信息。是DOM元素的一个方法,返回一个DOMRect对象,包含元素的大小及其相对于视口的位置。

m0_70547044的博客 648

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

getBoundingClientRect()的用法

getBoundingClientRect() 平时可能没注意到 这个方法, Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。 // 这个样子来获取鼠标点击位置的值,太麻烦了 // x=(e.pageX-canvasRect.offsetLeft+canvasRect.parentElement.scrollLeft) ; // y=(e.pageY-canvasRect.offsetTop+canvasRect.parentElement.scr

小蜜蜂的博客 5726

getBoundingClientRect方法获取盒子的相关长度属性

js的getBoundingClientRect方法获取盒子的相关长度属性

wanghe1111_的博客 688

getBoundingClientRect 获取元素位置和大小

getBoundingClientRect() 是一个用于获取元素位置和大小的方法。它返回一个 DOMRect对象,其提供了元素的大小及其相对于视口的位置,

呆呆狗 1493

【JS Fix】zoom 缩放导致 getBoundingClientRect 属性不准确的解决方案 (可解决 ElementUI, AntDesign 等悬浮组件偏移问题)

【JS Fix】zoom 缩放导致 getBoundingClientRect 属性不准确的解决方案 (可解决 ElementUI, AntDesign 等悬浮组件偏移问题)

時陨星的博客 1949

React中的getBoundingClientRect

getBoundingClientRect的归属 getBoundingClientRect一词最先来源于IE,是IE的私有属性,现在已经是一个W3C标准。是的,意思就是说原生js中同样有一个getBoundingClientRect。和react中的一样?准确来说,react中用到的就是原生js中的getBoundingClientRect。 因为你如果想在react中使用getBoundingClientRect,就必须先获取到react中的元素的ref,然后ReactDOM.findDOMNode(r

weixin_45929883的博客 2046

getBoundingClientRect的用法

getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。 1.语法:这个方法没有参数。 rectObject = object.getBoundingClientRect(); 2.返回值类型:TextRectangle对象,每个矩形具有四个整数性质( 上, 右 , 下,和左 )表示的坐标的矩形,以像素...

随笔 658

你真的会用getBoundingClientRect吗

你真的会用getBoundingClientRect吗? 左鹏飞 2017.09.20 本文介绍了什么是getBoundingClientRect;以及获取width,height的兼容性写法;最后介绍了两个使用场景:获取页面元素的位置和判断元素是否在可视区域。 1. 什么是getBoundingClientRect getBoundingClientRect用于获得页面中某个元素的左...

魔侠的沙滩 1535

scroll、offset、client三大家族和getBoundingClientRect方法

scroll、offset、client和getBoundingClientRect方法

太阳与星辰的博客 1524
上一篇: viewport视口的概念
下一篇: offsetWidth、offsetHeight、clientHeight、clientWidth、scrollHeight、scrollWidth详细对比
小菜101
博客等级 码龄10年 16粉丝 92原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值