js的尺寸和位置

已于 2024-02-18 14:59:52 修改
阅读量413 收藏 9
点赞数 14
分类专栏： js 文章标签： javascript 开发语言 ecmascript
于 2024-01-04 00:00:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46822304/article/details/135354614
版权

Doc的尺寸和位置

只读属性

  1. clientWidth与clientHeight
    当前dom可视宽高，即是content+padding
    在这里插入图片描述

  2. offsetWidth与offsetHeight
    可视dom的宽高（包含border） 即是content+padding+border
    在这里插入图片描述

  3. scrollWidth与scrollHeight

  • 当dom内容区域<=dom容器宽高 ，即是 不滚动情景
    scrollWidth与clientWidth scrollHeight与clientHeight 大小相同
    在这里插入图片描述

  • 当dom内容区域>dom容器宽高，即是 滚动情景
    scrollWidth，scrollHeight就是内容区域的宽高
    在这里插入图片描述

  1. clientTop与clientLeft
    dom元素的上边border的大小和左边border的大小
    在这里插入图片描述

  2. offsetTop与offsetLeft
    offsetTop 上边框距离最新有定位的父级边框之间的距离
    offsetLeft 做边框距离最近有定位的父级边框之间的距离
    在这里插入图片描述

可读可写属性

  1. scrollTop与scrollLeft
    scrollLeft，横向滚动卷起宽，不滚动默认0
    scrollTop, 竖向滚动卷起高，不滚动默认0
    在这里插入图片描述

  2. dom对象.style 获取dom的属性的样式

夜弥不迷夜
关注
专栏目录
JavaScript DOM对象的尺寸和位置详解
zhishunet
01-25 695
在DOM对象操作中，其尺寸和位置也是DOM的核心内容，因为js的“交互式应用”几乎少不了对DOM对象的尺寸和位置进行操作，特别是js动画效果。
javascript获取元素的位置坐标和尺寸
C语言专栏
09-22 1251
示例代码： function getLeft(e){ var offset=e.offsetLeft; if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); return offset; } function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=getTop(e.offsetParent); return offs..
JS-尺寸与位置
weixin_46479909的博客
01-18 482
通过js的方式，得到元素在页面中的位置。
JavaScript中操作DOM相关的尺寸和位置
小卡酷谋的博客
04-24 1062
在JavaScript中操作DOM节点使其运动的时候，常常会涉及到各种宽高以及位置坐标等概念。本章，我们就一起来总结一下使用JavaScript操作DOM时，尺寸和宽高相关的属性。
原生 JS 获取元素的尺寸和位置
KleyChan的博客
10-13 1832
关于元素的尺寸和位置，这原本是 CSS 干的事，但更多的时候需要用 JavaScript 来获取这些参数，比如一个很好的例子 js 实现的图片瀑布流。 在介绍 JS 中的例子之前，先来说明一下 css 中的元素尺寸。 CSS 中的 width 和 height 先开个头吧，一个元素所占据的物理尺寸包括以下几个部分，由内到外分别是内容，padding，border，margin，这些值加到一起才算是...
用JavaScript获取DOM元素位置和尺寸大小的方法
10-27
在JavaScript中，DOM元素的位置和尺寸大小是网页动态交互中不可或缺的部分。DOM（Document Object Model）是HTML和XML文档的结构化表示，它允许我们通过编程方式操作文档的各个元素。本文将深入探讨如何利用...
JavaScript DOM元素尺寸和位置
10-24
JavaScript DOM元素尺寸和位置是前端开发中非常关键的一部分，它涉及到如何准确地获取和操作HTML元素在页面上的尺寸和定位。DOM（Document Object Model）是HTML和XML文档的编程接口，它将网页结构抽象为一棵树形...
原生JS获取元素的位置与尺寸实现方法
10-19
原生JavaScript（JS）是Web开发中不可或缺的一部分，它允许开发者在不依赖任何外部库或框架的情况下，通过JavaScript代码直接操作DOM（文档对象模型），从而获取页面中元素的位置和尺寸信息。掌握如何使用原生JS来...
JavaScript位置与大小（1）之正确理解和运用与尺寸大小相关的DOM属性
10-23
本文将深入探讨JavaScript中与元素尺寸和位置相关的DOM属性，并指导如何在实际开发中正确理解和运用这些属性。 首先，需要明确几个关键的DOM属性，它们分别是offsetWidth、clientWidth、scrollWidth以及相对应的...
JavaScript获取元素尺寸和大小操作总结
10-24
本文总结了使用JavaScript获取指定元素大小、位置的几种方式。如果你用的是JQuery，则获取元素大小是非常简单的。但是我们还是有必要知道如何通过原生JavaScript来获取,需要的朋友可以参考下
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2817
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 853
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 405
【代码】【JavaScript】LeetCode：707设计链表。
记录开发一个英语听力训练网站
最新发布
业余程序员Blue的博客
09-14 382
目前只导入了雅思历年真题的听力音频，作为我日常练习英语听力的素材足够了。网站的主要功能其实就是英语句子精听，核心目的就是反复听每一句话，直到听懂为止，我觉得听力训练也没有太多技巧可言，就是老老实实地坚持去听，所谓网上经常说的“磨耳朵”吧。基于此，听力页面主要功能有：播放/暂停、上一句/下一句、播放次数选择、播放倍速选择、字体大小选择、是否显示原文、是否显示译文、是否自动播放下一句。而这些功能，基本上都是页面js操作。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 436
实现中国地图各省数据案例
JavaScript基础
zhangh040629的博客
09-10 1290
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 351
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 253
动态在本地引入图片
JS的输出语句
J3259392566的博客
09-13 195
js中严格区分大小写。
JavaScript获取浏览器尺寸与滚动位置
文章列出了多种JavaScript方法来获取不同类型的页面、窗口和屏幕尺寸，如可见区域宽高、全宽高、滚动位置以及屏幕分辨率等。作者还表达了对众多相似概念的理解困难，但他通过整理和抽象，创建了针对页面、窗口的属性...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值