DOM获取尺寸、位置数据字典

最新推荐文章于 2022-06-04 15:44:28 发布
置顶 最新推荐文章于 2022-06-04 15:44:28 发布
阅读量262 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript文章 文章标签： JavaScript DOM 位置尺寸
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Alcantara/article/details/94338763
本文详细解析了DOM中与尺寸和位置相关的API，如width(), offsetWidth, clientWidth等，阐述了它们在不同场景下的具体表现，以及与CSS定位、子元素margin和border的关系，帮助读者理解并正确使用这些API。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于DOM尺寸、位置相关的api，非常混乱且容易混淆，于是特别整理出一个数据字典。
获取元素宽高
获取元素定位
获取视口宽高
相对视口定位
获取文档宽高
相对文档定位
事件对象
滚动事件

注意

  • width()和offsetWidth、clientWidth在插入DOM树之前为0
  • 涉及CSS的定位，以子元素margin为准；否则以子元素border为准，例如element.style, jquery的position()
  • 标准模式下documentElement是html的尺寸，body是body元素的尺寸
  • 如果子元素没有absolute，scrollHeight包括父元素下外padding+子元素的下margin；如果有absolute，则只包括子元素的下margin
mysql数据字典在哪_MySQL数据字典
weixin_39710951的博客
02-18 2442
MySQL数据字典数据字典表受保护，只能在MySQL的调试版本中访问。但是，MySQL支持通过INFORMATION_SCHEMA表和SHOW语句访问存储在数据字典表中的数据。有关构成数据字典的表的概述，请参见数据字典表。MySQL系统表仍然存在于MySQL 8.0中，可以通过SHOW TABLES在mysql系统数在以前的MySQL版本中，字典数据部分存储在元数据文件中。基于文件的元数据存储的问...
mysql存储字典,详解MySQL-8.0数据字典
weixin_39974030的博客
03-23 1977
1. 引言数据字典(Data Dictionary)中存储了诸多数据库的元数据信息如图1所示，包括基本Database, table, index, column, function, trigger, procedure，privilege等；以及与存储引擎相关的元数据，如InnoDB的tablespace, table_id, index_id等。MySQL-8.0在数据字典上进行了诸多优化，...
数据字典的设计--4.DOM对象的ajax应用
weixin_34148508的博客
06-30 113
　　需求：点击下拉选项框，选择一个数据类型，在表单中自动显示该类型下所有的数据项的名称，即数据库中同一keyword对应的所有不重复的ddlName。 1.在dictionaryIndex.jsp中添加： <script type="text/javascript" src="${pageContext.request.contextPath }/script/pub.j...
Oracle --- 数据字典
我的博客
06-04 741
Oracle --- 数据字典
常见的dom取值
heni6560的博客
04-22 1022
1.标签input 取值： var value=$("#imgtalk").val(); 赋值： 1),不推荐使用 这种写法有时会失效,特别是他的父元素是dosplay:none时 $("#imgtalk").val("值"); 2),推荐使用 可正常赋值 $("#imgtalk").attr("value","值"); 3),js原始写法 document.getEle...
java 设计数据字典_应用开发中数据字典项设计实现方案
weixin_35554273的博客
02-16 4021
应用开发中数据字典项设计实现方案在 应用开发中，总会遇到许多数据字典项，比如对象状态、对象类型等等，这些项一般都是固定的若干可选值选项，比如对象状态可能有新建、修改、删除等状态，这 些数据字典项一旦定义完毕改动的频率非常低；在应用开发中，为了处理方便，一般要对这些数据字典项值选项进行数字编码(例如：0表示新建，1表示修改，2表示删除等)，以方便应用程序中使用。而UI显示对象信息时不能显示对象状态等...
数据字典设计
追风天涯的博客
11-18 1万+
在应用开发中，总会遇到许多数据字典项，比如对象状态、对象类型等等，这些项一般都是固定的若干可选值选项，比如对象状态可能有新建、修改、删除等状态，这些数据字典项一旦定义完毕改动的频率非常低；在应用开发中，为了处理方便，一般要对这些数据字典项值选项进行数字编码（例如： 0表示新建，1表示修改，2表示删除等），以方便应用程序中使用。而UI显示对象信息时不能显示对象状态等的编码，对于编码值设计人员知道代表什么意思，但用户就不明白了，所以需要进行编码转换，从编码转换为文字描述（名称），也就是需要把状态编码0转换为“新
vue中实现先请求数据再渲染dom分享
08-27
在Vue.js中，正确地在组件加载时获取数据并在数据准备好后再渲染DOM是前端开发中常见的需求。但如果不注意Vue的生命周期钩子函数的执行时机，就可能遇到在数据还未加载完成时就尝试访问DOM导致的问题。这篇分享正是...
jquery将json转为数据字典的实例代码
10-16
当我们需要将JSON格式的数据转换为JavaScript中的数据字典（即对象）以便于使用时，jQuery的AJAX方法就显得尤为重要了。 从提供的文件内容中，我们可以详细了解到如何使用jQuery中的$.ajax方法向服务器发送GET请求...
数据字典自动生成文档
08-08
数据字典自动生成文档是一种高效的方法，用于整理和呈现数据库中的结构化信息。在这个场景中，我们关注的是一个使用PHP开发的工具，它能够自动读取数据库内容，并将其以可视化的形式展示在网页上，同时支持导出为...
CRM-数据字典表表单验证
谁D了我的BUG
07-30 498
1、设计数据库表，工具：PowerDesigner（PDM建模：物理数据模型） tbl_dic_type tbl_dic_value 数据库表设计的时候注意事项： 一般情况下为了开发方便，能用字符串类型尽量用字符串类型：Varchar/Char…(java:String) 在实际开发中为了保证程序的执行效率，一般是不建议添加外键约束的（FK一般不添加）。添加了外键约束之后，会让检索效率降低...
数据字典和控制文件
zdh_139的博客
07-07 1295
4.1、数据字典存放位置： D:\app\donghui\product\11.2.0\dbhome_1\RDBMS\ADMIN 4.2--查看用户test所拥有的所有对象的信息： select t.OWNER,t.OBJECT_NAME,t.OBJECT_ID,t.CREATED,t.status,t.OBJECT_TYPE from all_objects t where t.OWNER
数据字典的主要作用是什么？
热门推荐
汪小哥
05-21 12万+
数据字典是指对数据的数据项、数据结构、数据流、数据存储、处理逻辑、外部实体等进行定义和描述，其目的是对数据流程图中的各个元素做出详细的说明。 数据字典（Data dictionary）是一种用户可以访问的记录数据库和应用程序源数据的目录。主动数据字典是指在对数据库或应用程序结构进行修改时，其内容可以由DBMS自动更新的数据字典。 数据字典的主要作用：数据字典和数据流图共同构成系统的逻辑模型。没有流图
从jQuery的remove()和原生JS的removeChild()方法再观jQuery对象和DOM对象的关系
Alcantara的博客
01-23 1万+
jQuery对象是通过jQuery包装DOM对象后产生的对象。jQuery的remove()方法和原生js的removeChild()方法都是从DOM中删除节点，方法的返回值是：1. remove()方法：返回一个指向已被删除的节点的引用，这个节点元素还可以使用；2. removeChild()方法：删除的节点仍然存在于内存，只是没有添加到当前文档的DOM树中。可以总结为：remove()方法移除...
【移动端事件】swiper左右滑动时禁止页面上下滚动
Alcantara的博客
07-16 7593
某些swiper类插件，左右滑动时会导致页面上下滚动，如果在touchmove事件中直接使用event.preventDefault()，就会彻底阻止触摸滑动，给用户的感受就是划不动。 以下是增加的fix code // 左右滑动时阻止页面上下滑动 var touchElement = {}; var $slides = $('.am-slider'); if ($...
addEventListener事件监听使用匿名函数作为回调函数的问题
Alcantara的博客
06-01 3498
addEventListener事件监听绑定匿名函数，不能用removeEventListener解除绑定，JS认为这不是对应的那个函数。 因此，如果多次执行addEventListener（例如addEventListener事件绑定写在在mousemove事件内），使用匿名函数作为回调函数就是进行了多个函数的绑定，触发事件时会执行多次；具名函数则是绑定的唯一这个函数，触发时只执行一次。...
阻止事件冒泡和围绕.on()方法 [.selector]事件委托中冒泡情况的探讨
Alcantara的博客
10-04 2789
2019-7-23更新： 1. document和body代理事件，在某些浏览器无效，目前发现在微信浏览器无效。 2. 前端使用模板引擎渲染的节点，可能滞后与事件的绑定，因此这种情况下最适合事件代理。 一、事件冒泡和阻止事件冒泡 事件冒泡是JavaScript的核心概念之一，它的原理很简单，但真正应用起来还是有不少的坑。 这里说一说关于阻止事件冒泡的本质。 我们都知道阻止事件冒泡...
debug过程中对加载顺序、对象属性、Vue数据传递和计算属性等问题的总结
Alcantara的博客
03-11 1719
异步加载 JavaScrip 脚本放在&amp;amp;lt;head&amp;amp;gt;内：文档页面加载之前装载（不执行代码， 需调用才执行或事件触发执行）。 脚本放在&amp;amp;lt;body&amp;amp;gt;内：当页面被加载时执行，用来动态生成页面的一些内容。 增加延迟脚本defer属性 ** – 只适用外部脚本文件 – 立即下载，但延迟执行，&amp;amp;lt;/html&amp;amp;gt;标签之后执行 – 多个
[JavaScript，ES6]函数声明提升和预解析的总结和试验
Alcantara的博客
12-09 1326
1. 变量的声明被提前到作用域顶部，赋值保留在原地 2. 函数声明整个“被提前” （且后面不再重新“赋值”） 3. 函数表达式时，只有变量“被提前”了，函数没有“被提前” 4. 在块中定义的函数声明或函数表达式，只会提升其声明部分，也就是只提升变量名，不提升函数的定义哦。不要在块中声明函数！ 5.如果在提升的时候发生重命名了怎么办？   首先还是都会提升（函数声明整个“被提前”，且后
Django字典数据与JS交互实践
1. Django视图处理请求，获取数据并构建适合前端的JSON格式数据。 2. JSON数据通过渲染模板传递到HTML页面。 3. 前端JavaScript使用AJAX请求获取JSON数据，解析后动态更新页面元素。 这样的交互方式使得前后端分离...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值