位置: IT常识 - 正文

原生js获取元素的各种位置(大全)(原生js获取元素高度)

编辑:rootadmin
原生js获取元素的各种位置(大全)

推荐整理分享原生js获取元素的各种位置(大全)(原生js获取元素高度),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:原生js如何获取dom,原生js获取元素高度,原生js获取元素宽度,原生js获取元素类名设置高度,原生js获取元素祖先元素的方法parentNodes,原生js获取元素祖先元素的方法parentNodes,原生js获取元素高度,原生js获取元素祖先元素的方法parentNodes,内容如对您有帮助,希望把文章链接给更多的朋友!

加给元素:

offsetLeft (距离定位父级的距离)

offsetTop (距离定位父级的距离)

offsetWidth (可视宽度)

offsetHeight (可视高度)

clientLeft (左边框宽度)

clientTop (上边框宽度)

clientWidth(width + padding)

clientHeight(height + padding)

scrollTop(纵向滚动距离)

scrollLeft(横向滚动距离)

scrollWidth(内容宽度)

scrollHeight(内容高度)

getBoundingClientRect ( ) 返回值:对象 有6个属性

left(元素左侧相对于可视区左上角的距离)

right(元素右侧相对于可视区左上角的距离)

top(元素上边相对于可视区左上角的距离)

bottom(元素下边相对于可视区左上角的距离)

width(可视宽度)

height(可视高度)

获取可视区宽高:

window.innerWidth

window.innerHeight

document.documentElement.clientWidth

document.documentElement.clientHeight

屏幕宽高:

原生js获取元素的各种位置(大全)(原生js获取元素高度)

window.screen.width

window.screen,height

获取文档宽高:

document.body.clientWidth

document.body.clientHeight

document.documentElement.scrollWidth

document.documentElement.scrollHeight

document.body.scrollWidth(如果内容宽度超过一屏,得到文档宽度;如果内容小于一屏,得到一屏的宽度)

document.body.scrollHeight (如果内容高度超过一屏,得到文档高度;如果内容小于一屏,得到一屏的高度)

获取滚动条距离:

document.body.scrollTop

document.body.scrollLeft

window.scrollY

window.scrollX

document.documentElement.scrollTop

document.documentElement.scrollLeft

window.pageYOffset

window.pageXOffset

js中获取当前位置有如下几种方法:

event.offsetX, (IE属性,测试都可以使用)

event.offsetY, (IE属性,测试都可以使用)

event.clientX,

event.clienY,

event.scrennX,

event.screenY,

他们的区别如下:

可以看出,

event.screenX和event.screenY是相对于显示屏的位置。

event.clientX和event.clientY是相对于浏览器的位置。

event.offsetX和event.offsetY是相对于元素的位置。

本文链接地址:https://www.jiuchutong.com/zhishi/297334.html 转载请保留说明!

上一篇:Spring Boot 中如何使用 Spring Cloud Alibaba 实现微服务治理(spring bootcsdn)

下一篇:【Pytorch基础知识】数据的归一化和反归一化(pytorch基本操作)

  • 企业出售土地的土地增值税计算方法
  • 社保局发放的稳岗补贴怎么入账
  • 小规模纳税人补税怎么补
  • 个税子女教育扣除需要提供什么资料
  • 外贸出口免税政策
  • 施工单位临时设施搭建费属于
  • 小规模纳税人免征增值税政策
  • 企业可以采用多品牌战略吗
  • 企业所得税税率有几个档次
  • 经纪代理服务怎么做分录
  • 不含税销售收入含消费税吗
  • 不动产在建工程使用的外购物资可以抵扣吗
  • 充值费用优惠怎么取消
  • 预缴增值税转入流程
  • 项目上发生伙食问题
  • 补交以前年度房产税如何记账
  • 耕地占用税如何申报缴纳
  • 融资租赁开始日最低租赁付款额
  • 企业员工无偿使用合法吗
  • 雇主责任险可以税前扣除吗
  • 物业公司取暖费收费标准
  • 业务招待费在企业所得税税前扣除的标准是什么?
  • 现金折扣应不应计入成本
  • 什么是清算资金
  • 纳税义务发生时间和纳税期限的关系
  • 特殊金融机构有哪些
  • 备用金发票冲抵
  • 电费返还怎么查询
  • 企业接收股东划入资产作为收入处理有所得税差异吗
  • 已认证的发票对公司影响
  • win11界面不停刷新
  • 预付款多长时间
  • php require include
  • 今天春节是什么生肖
  • 出差补贴如何入账报销
  • 如何防范增值税的税收风险
  • 在建工程账务核算方法
  • PHP:mcrypt_module_get_supported_key_sizes()的用法_Mcrypt函数
  • 南极岛在哪
  • 可以跨城租车吗
  • 核定征收的企业所得税怎么算
  • mmdetection optimizer
  • 新闻发布管理系统
  • php函数写法
  • vue中的echarts
  • 微软 new bing 广告收入
  • thinkphp withjoin
  • php多线程与并发
  • 矿产资源补偿费是什么
  • 物权变动的原因是什么
  • 公允价值变动收益是指什么
  • 固定资产不折旧不摊销怎么做账
  • 金税盘减免税款月末如何结转
  • 小规模纳税人企业所得税税收优惠政策
  • 什么是叫资产负债表项目
  • 坏账准备的核算
  • 小规模纳税人收普票和专票有什么区别
  • 小规模纳税人未开票收入如何申报增值税
  • 工程项目增值税预缴税率
  • 工会经费可以在以后年度扣除吗
  • 税务稽查其他应付款
  • 培训费产生的差额怎么算
  • 发票冲红给对方单位说明怎么写
  • sqlserver2000删除注册表
  • mysql免安装版怎么使用
  • 应该怎么消除
  • 什么叫脚本错误
  • win1020h2版好不好
  • 电脑xp系统如何
  • psoft1.exe - psoft1是什么进程 有什么作用
  • win7z
  • android secure
  • css教程实例
  • cmd 更改密码
  • jquery中有哪些dom操作?
  • js uridecode
  • 电子税务局领取纸质发票的步骤
  • 什么叫关联单位
  • 买车开增值票是什么意思
  • 契税减税、免税条件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设