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=& ...
最新文章
- Reboot分享第三期(已结束)
- 在 JDK 9 中更简洁使用 try-with-resources 语句
- 博客转向 github pages
- Python深度学习之搭建小型卷积神经网络(Kaggle网站Dogs-vs-Cats数据集)
- HTML5 CSS3初学者指南(3) – HTML5新特性
- Cypress 基础 - 元素的定位
- python 验证模型_Python中的模型验证
- r730服务器内置SD卡位置,已解决: RE: 关于r730xd做存储服务器的疑问 - Dell Community...
- 【自我解析】2020年华为杯数学建模比赛E题
- 中国城市公园规划建设行业运行状况与趋势预测展望报告2022-2028年版
- 10篇最新年优秀CISSP认证考试心得分享(值得收藏)
- 甲骨文CEO拉里-埃里森--硅谷最张扬最具争议的CEO
- 四年上册级计算机教学计划,四年级上学期教学计划(通用5篇)
- vue3使用setup代替created
- Xilinx Srio详解IP核使用
- 分布式是大数据处理的万能药?
- facebook使用教程_保持知情的方法有很多。 为什么限制自己使用Facebook?
- Watershed算法
- js操作数组前面插入,后面插入
- java爬虫:Heritrix教程
热门文章
- Google Play/App Store/admob/facebook开发者收款方式有哪些?如何结汇?
- Mathematica中的PopularCurve手绘卡通图片的可视化
- web安全之路的规划
- 运营实操|如何利用微信后台数据优化微信运营
- .sp3文件命名规则
- 解决docker中 pytz.exceptions.UnknownTimeZoneError: ‘Etc/UTC‘ 错误
- html的注释标签是什么,html 注释标签的详细介绍
- svn 服务器忽略文件夹,SVN忽略不提交文件夹
- Proxmark3 Easy 如何流畅的在Linux中操作?
- MySQL数据库表怎么进行添加数据、更新数据和删除数据操作——MySQL 5.7数据库