js中alert相关知识点(js中getBoundingClientRect 方法案例详解)
类别:编程学习 浏览量:755
时间:2021-10-18 11:45:37 js中alert相关知识点
js中getBoundingClientRect 方法案例详解一.getBoundingClientRect() 解析getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
语法
rectObject = object.getBoundingClientRect();
值
rectObject.top:元素上边到视窗上边的距离; rectObject.right:元素右边到视窗左边的距离; rectObject.bottom:元素下边到视窗上边的距离; rectObject.left:元素左边到视窗左边的距离; rectObject.width:是元素自身的宽度 rectObject.height是元素自身的高度
跨浏览器兼容
如果需要更好的跨浏览器兼容性,请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。不能访问这些属性的脚本可以使用下面的代码:
// For scrollX (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft // For scrollY (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollTop == 'number' ? t : document.body).scrollTop
示例
// rect 是一个具有四个属性 left、top、right、bottom 的 DOMRect 对象
注:DOMRect 是 TextRectangle 或 ClientRect 的标准名称,他们是相同的。
var rect = obj.getBoundingClientRect();
到此这篇关于js中getBoundingClientRect( )方法案例详解的文章就介绍到这了,更多相关js中getBoundingClientRect( )内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- nodejs架构解析(详解NodeJS模块化)
- nodejsweb服务(Nodejs实现内网穿透服务)
- js时间日期处理
- js日历图片(js实现简单日历效果)
- python的decode函数在哪个模块(python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决)
- MVC中JSON字符长度超出限制
- vue浏览pdf文件(如何在vue中使用pdfjs预览pdf文件)
- Extjs中文乱码
- js统计文本框剩余可输入字数
- vuejs filter过滤器的使用(Vue过滤器filter实现及应用场景详解)
- vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
- js中Math对象的用法
- js实现商品添加(js实现购物网站放大镜功能)
- js隐藏显示tr
- 用js编写tab栏切换(JavaScript实现简易tab栏切换内容栏)
- 微信发送镭射效果代码(JS实现微信"炸屎"大作战功能)
- 怎么做好SEO(怎么做好seo内容优化)
- 冬季钓鱼子线用 长 还是 短(冬季钓鱼子线用)
- 鱼竿 夏钓短,冬钓长 ,一定是这样 认清优缺点在选竿(鱼竿夏钓短冬钓长)
- 鲢鳙钓底还是钓浮 流水的水域应怎样做钓(鲢鳙钓底还是钓浮)
- 入秋后的第二场苹果发布会来了 全新M1系列芯片登场(入秋后的第二场苹果发布会来了)
- 苹果正式发布自研芯片M1 5nm 32核心 彻底放弃Intel(苹果正式发布自研芯片M1)
热门推荐
- python如何抓取公众号文章(python爬取微信公众号文章的方法)
- sql server 实例功能(SQL Server简单查询示例汇总)
- python 时间戳转化为格式(Python datetime和unix时间戳之间相互转换的讲解)
- dedecms栏目静态化(DedeCms获取任意栏目N级列表链接树形菜单的方法)
- css选择器使用时需要注意哪些方面(CSS选择器的新用法推荐)
- dedecms安全设置(织梦系统DedeCMS设定栏目及文档权限登录后跳转到登陆前的页面的实现方法)
- python中lambda教程(浅析python的Lambda表达式)
- 在windows安装docker详细步骤(Docker 部署 Prometheus的安装详细教程)
- php7 入门(php7新特性的理解和比较总结)
- nginx 处理服务器错误(nginx服务器异常502 bad gateway原因排查)