js中获取dom元素高度
目录
1.dom元素的宽高
2.鼠标事件中的常用高度宽度:
3. 总结:
4.参考博客:
1.dom元素的宽高
javascript中获取dom元素高度和宽度的方法如下:
网页可视区域宽: document.body.clientWidth
网页可视区域高: document.body.clientHeight
网页可视区域宽: document.body.offsetWidth (包括边线的宽)
网页可视区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
对应的dom元素的宽高有以下几个常用的:
元素的实际高度:document.getElementById("div").offsetHeight
元素的实际宽度:document.getElementById("div").offsetWidth
元素的实际距离左边界的距离:document.getElementById("div").offsetLeft
元素的实际距离上边界的距离:document.getElementById("div").offsetTop
2.鼠标事件中的常用高度宽度:
1、pageX和pageY:
相对于浏览器中完全呈现内容区域的左上角。此参考点位于左上角的URL栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置,
并且如果在页面中嵌入了嵌入的可滚动页面并且用户移动滚动条,则实际上可以改变位置。2、screenX和screenY:
相对于物理屏幕/监视器的左上角,只有增加或减少监视器数量或监视器分辨率时,此参考点才会移动。3、clientX和clientY:
相对于浏览器窗口的内容区域(视口)的左上边缘。即使用户从浏览器中移动滚动条,此点也不会移动。
详细位置说明请看图:
还可以参考下图。
3. 总结:
关于浏览器高度获取的内容每次总是忘记,干脆一次性把常用的罗列一下,方便下次查找。欢迎大佬们补充指正!
4.参考博客:
https://www.cnblogs.com/smile6542/p/11895646.html
https://blog.csdn.net/qq_40990854/article/details/88925460?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-3.control
https://www.cnblogs.com/lingdublog/p/6438055.html
js中获取dom元素高度相关推荐
- javascript中获取dom元素高度和宽度
javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight ...
- vue 获取id元素,vue.js怎么获取dom元素?
vue.js怎么获取dom元素?下面本篇文章给大家介绍一下vue.js获取dom元素的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 使用Vue.js获取dom元素 标签中添加 ...
- Vue中获取dom元素的宽高
vue中获取dom元素的宽高 template模板中给dom绑定ref: <el-carouselid="ailabelmap"ref="remarkCarusel ...
- vue如何获取div的宽度_vue获取dom元素高度的方法
获取DOM高度: 要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作(参照生命周期钩子mounted语法:https://cn.vuejs.org/v2/api/#mo ...
- vue获取dom元素高度的方法
本文转载自: https://www.cnblogs.com/lhl66/p/7908133.html 作者:lhl66 转载请注明该声明. 获取高度: <div ref="自定义名称 ...
- 在Vue中获取DOM元素的实际宽高
最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素 在 Vue 中可以 ...
- vue 获取id元素_.vue组件中获取DOM元素问题
一.问题引入 原项目把一块内容直接写在了模块中(浏览器显示的一整个页面),现在想把它提成一个单独组件,而且把其中使用document.getElementById('id')改为ref获取元素的形式. ...
- 在vue3setup语法糖中获取DOM元素
1.给dom元素添加ref <a-form v-if="modalTitle==='新建指标'" :model="addForm" :rules=&quo ...
- 在vue中获取dom元素
在vue中可以通过给标签加ref属性,就可以在js中利用ref去引用它,从而操作该dom元素,以下是个例子,可以当做参考 <template><div><div id=& ...
最新文章
- 【蓝桥java】进制与整除之尼姆堆
- 嵌入式学习笔记之XMODEM
- 阿里云分布式容器平台即将全面启动公测
- sqlhelper中事务的简单用法(初学者)
- 自动化测试在CI CD管道中的作用
- [渝粤教育] 西南科技大学 经济法概论 在线考试复习资料2021版(3)
- linux系统creat函数,Linux系统调用之creat函数
- VC小技巧(网上搜的)
- javasript ide
- 图解 TCP IP 协议:三次握手、四次挥手
- QQ自由幻想刺客加点
- kindle中html笔记,Kindle教程:如何导出笔记
- cmake和make的简单理解
- Python OpenSSL基本操作接口
- 7-105 sdut-C语言实验——三个数排序7-106 sdut-C语言实验——模拟计算器7-107 sdut-C语言实验——找中间数
- 【免费SEO工具分享】长尾关键字挖掘器:外贸拓词长尾关键词挖掘工具
- ValueError: [E030] Sentence boundaries unset. You can add the 'sentencizer' component to the pipelin
- 形容语言aab c,形容aab成语有哪些_四字词语 - 成梦词典
- Node.JS 学习记录(02)
- 安徽专业计算机应用能力考试,安徽省计算机应用能力考试时间安排出炉