JS-DOM模型中元素的位置、尺寸属性

最新推荐文章于 2024-09-06 22:20:29 发布
最新推荐文章于 2024-09-06 22:20:29 发布
阅读量350 收藏
点赞数
文章标签： HTML 前端 JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37669108/article/details/78725199
版权

【第一组】

offsetleft:元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离（不包括元素的边框和父容器的边框）。

 

offsettop:同理是指元素的边框的外边缘距离与已定位的父容器（offsetparent）的上边距离（不包括元素的边框和父容器的边框）。

 

offsetwidth:描述元素外尺寸宽度，是指元素内容宽度+内边距宽度(左右两个)+边框(左右两个)，不包括外边距和滚动条部分。

 

offsetheight:同理描述元素外尺寸高度，是指 元素内容高度+内边距高度(上下两个)+边框(上下两个)，不包括外边距和滚动条部分。

 

【第二组】

clientleft:元素的内边距的外边缘和边框的外边缘的距离，实际就是边框的左边框宽度

 

clienttop:同理边框的上边框的宽度

 

clientwidth:用于描述元素内尺寸宽度，是指元素内容+内边距 大小，不包括边框、外边距、滚动条部分

 

clientheight:同理用于描述元素内尺寸高度，是指 元素内容+内边距 大小，不包括边框、外边距、滚动条部分

 

【第三组】

scrollwidth：内容区域尺寸加上内边距加上溢出尺寸，当内容正好和内容区域匹配没有溢出时，这些属性与clientWidth和clientHeight相等

 

scrollheight：同上

 

scrolltop：滚动条上方卷去的高度

 

scrollleft：滚动条左边卷去的宽度

鱼酱摆摆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS中DOM元素的位置
weixin_46421045的博客
06-10 399
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 200px;
JS DOM 元素大小和位置
qq_35112578的博客
08-08 368
offset scroll client
JS中的位置属性合集
五花漏的博客
03-12 627
一 二 width() - 设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() - 设置或返回元素的高度（不包括内边距、边框或外边距）。 innerWidth() - 返回元素的宽度（包括内边距）。 innerHeight() - 返回元素的高度（包括内边距）。 outerWidth() - 返回元素的宽度（包括内边距和边框）。 outerHeight() ...
JS的DOM位置属性
LaoYangSaid的博客
06-12 222
详情请看https://blog.csdn.net/Abby_zzy/article/details/88697889
dom中的元素尺寸属性
赵佳敏的博客
12-03 937
目录一、尺寸属性1. offsetHeight、offsetWidth---网页可见区域宽高（含边框）2. clientHeight、clientWidth---网页可见区域宽高（不含边框）3. style.width、style.height----内容区域的宽高4. scrollWidth、scrollHeight----网页正文全文宽高（包括不可见部分）二、元素偏移1. offestTop---------上偏移2. offsetLeft---------左偏移三、两个滑动距1. scrollTop.
javascript的一些位置尺寸属性
qq_38557202的博客
10-28 144
时间旧了，有些属性都玩了，回忆下。 一、尺寸 window.innerWidth 窗口的可视区域（包括滚动条的宽度） window.innerHeight 窗口的可视区域（包括滚动条的高度） window.outerWidth 浏览器界面宽度（win10有隐藏边框，微信截图可以看出） window.outerHeight 浏览器界面高度 window.screen.width 设备屏幕的宽...
JS中获取元素位置以及宽高的各种属性整理
xiongqiangwin1314的专栏
09-07 720
clientWidth: width+pad左+pad右-滚动条宽度 clientHeight: height+pad上+pad下-滚动条高度 clientLeft: 值即为div的border-left设置的值 clientTop: 值即为div的border-top设置的值 offsetWidth: width+pad左+pad右+border左+border右 of
第三章：javascript-DOM对象模型-补充课件.ppt
03-31
JavaScript DOM对象模型是Web开发中不可或缺的一部分，它允许开发者通过编程方式操纵网页的结构、内容和样式。在JavaScript中，DOM被用作一种接口，使我们能够读取、修改、添加或删除HTML、XML文档的各个部分。DOM将...
Javascript-DOM编程艺术研究.docx
11-17
在实际应用中，JavaScript-DOM编程的艺术不仅包括理解和掌握DOM的基本概念，还包括优化DOM操作以提高性能，比如减少DOM遍历，利用文档碎片（DocumentFragment）进行批量操作，以及使用事件委托等技术。学习DOM编程...
js基础之DOM中元素对象的属性方法详解
01-19
最基本的节点类型是Node类型，其他所有类型都继承自Node，DOM操作往往是js中开销最大的部分，因而NodeList导致的问题最多。要注意：NodeList是‘动态的’，也就是说，每次访问NodeList对象，都会运行一次查询，虽然...
快速解决js动态改变dom元素属性后页面及时渲染的问题
10-22
总结来说，本文介绍了在JavaScript中动态改变DOM元素属性时，如何利用setTimeout函数解决页面渲染不及时的问题。通过这种方法，开发者可以更合理地控制浏览器的渲染行为，提高用户界面的响应性和交互体验。
JavaScript-DOM--:JavaScript DOM编程艺术源代码
03-24
JavaScript DOM（Document ...总的来说，掌握JavaScript DOM编程不仅需要理解DOM模型，还需要熟悉各种DOM操作方法，以及如何有效地进行性能优化。这本书的学习将有助于开发者创建更动态、交互性更强的Web应用程序。
js 各种位置获取全解（包括元素属性、鼠标位置、滚动位置）
在下月亮有何贵干
01-14 1952
目录普通元素元素四周三级目录 普通元素 如果不了解盒子模型建议先阅读一下：css 盒子模型详解。 offsetLeft、offsetTop（左边与上边与设置了定位的父级的距离） offsetWidth、offsetHeight（可视宽高，内容区+padding+border+滚动轴宽度（如果存在）） clientLeft、clientTop （左、上边框宽度） clientWidth、clientHeight（内容区+padding，不包括border） scrollTop、scrollLeft（水平垂直
JavaScript——DOM位置属性
Abby_zzy的博客
03-20 1560
Event对象属性： clientX相对浏览器窗口的x坐标位置 offsetX设置或者是得到鼠标相对于事件目标的父元素的内边界在x坐标上的位置。（FF不支持） screenX相对于用户屏幕。 例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me...
js中的各种获取元素宽高以及位置属性总结
虚心若愚，求知若渴
02-28 503
dom对象 只读属性 clientWidth和clientHeight 元素的部分内容宽高,即：padding+content,如果没有滚动条，就是元素的宽高，如果有滚动条，则要减去滚动条的宽高！！ offsetWidth和offsetHeight 这是 padding+content+border的宽高，与有无滚动条无关，之和元素本神的宽高有关 clientTop和clien...
js里使用的各种元素大小尺寸属性总结
wfbob的专栏
01-11 1753
div元素： getComputedStyle(element, null).width，getComputedStyle(element, null).height：元素内容区域尺寸，不包含外边距，边框以及内边距(IE8及以下使用element.currentStyle代替getComputedStyle())； clientWidth，clientHeight：元素可视区域尺寸，内边距以内
图示：DOM元素各种位置属性
weixin_30778805的博客
10-15 179
转载于:https://www.cnblogs.com/Ceri/p/7670622.html
JavaScript之DOM元素尺寸与位置
Danie_wu的博客
02-26 207
一、获取元素CSS大小 1、通过style内联获取元素的大小 style只能获取行内的CSS样式的宽和高，没有则返回空。 window.onload = function(){ var box = document.getElementById('box'); alert(box.style.width); alert(box.style.height); alert(type
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 461
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
JavaScript中的Window对象opener属性与DOM模型解析
DOM模型由一系列的对象组成，每个对象代表了文档的一部分，如元素、文本、注释等。通过DOM，你可以遍历整个文档结构，查找特定元素，或者更改元素的样式、内容等。 DOM的历史可以追溯到Netscape Navigator 2.0时代...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值