位置: 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基本操作)

  • 一句话签名爱情经不起时间的更改(一句话签名励志)(一句话签名爱情怎么写)

    一句话签名爱情经不起时间的更改(一句话签名励志)(一句话签名爱情怎么写)

  • iqooz5x手机屏幕多大

    iqooz5x手机屏幕多大

  • 小米主题在哪个文件夹(小米主题在哪个软件下载)

    小米主题在哪个文件夹(小米主题在哪个软件下载)

  • 苹果手机被wifi禁了怎么办(苹果手机被wifi植入监控病毒那抹点数据有用吗)

    苹果手机被wifi禁了怎么办(苹果手机被wifi植入监控病毒那抹点数据有用吗)

  • 剪映要钱吗(十大免费剪辑软件下载)

    剪映要钱吗(十大免费剪辑软件下载)

  • 哔哩哔哩为什么邮箱注册不了(哔哩哔哩为什么打不开了)

    哔哩哔哩为什么邮箱注册不了(哔哩哔哩为什么打不开了)

  • airpods右边连不上(airpods右耳连接不了)

    airpods右边连不上(airpods右耳连接不了)

  • 新加的微信好友能看到之前的朋友圈吗(新加的微信好友设置标签后可以看到之前的朋友圈吗)

    新加的微信好友能看到之前的朋友圈吗(新加的微信好友设置标签后可以看到之前的朋友圈吗)

  • 电脑屏幕自己变大怎么办(电脑屏幕自己变黄了怎么办)

    电脑屏幕自己变大怎么办(电脑屏幕自己变黄了怎么办)

  • 为什么内存卡插到手机里面不能用(为什么内存卡插到电脑上去没反应?)

    为什么内存卡插到手机里面不能用(为什么内存卡插到电脑上去没反应?)

  • 苹果x建议更新13.4吗(苹果x建议更新13吗)

    苹果x建议更新13.4吗(苹果x建议更新13吗)

  • 拼多多设为匿名是什么意思(拼多多设为匿名评价别人还能看见)

    拼多多设为匿名是什么意思(拼多多设为匿名评价别人还能看见)

  • 优酷视频转码出错怎么解决(优酷视频转码出现错误)

    优酷视频转码出错怎么解决(优酷视频转码出现错误)

  • 什么是天基互联网(天基互联什么意思)

    什么是天基互联网(天基互联什么意思)

  • 不是原装的线会把手机充坏吗(不是原装的线充电好吗)

    不是原装的线会把手机充坏吗(不是原装的线充电好吗)

  • 打印机无驱动程序怎么办(打印机无驱动程序)

    打印机无驱动程序怎么办(打印机无驱动程序)

  • word怎么把一页删掉(word怎么把一页变成两页)

    word怎么把一页删掉(word怎么把一页变成两页)

  • 手机6个g和8个g区别(手机八g和六g有什么区别)

    手机6个g和8个g区别(手机八g和六g有什么区别)

  • 拼多多公众号在哪里找(拼多多公众号在哪里关注)

    拼多多公众号在哪里找(拼多多公众号在哪里关注)

  • 手机号码拉黑后打过去会提示什么(手机号码拉黑后能收到短信吗)

    手机号码拉黑后打过去会提示什么(手机号码拉黑后能收到短信吗)

  • 飞行模式下别人打电话有记录吗(飞行模式下别人打微信视频)

    飞行模式下别人打电话有记录吗(飞行模式下别人打微信视频)

  • 网络适配器有感叹号(网络适配器有感叹号,错误代码10)

    网络适配器有感叹号(网络适配器有感叹号,错误代码10)

  • 计提本月增值税会计科目
  • 纳税调整增加额在报表的哪里
  • 货物退回是什么意思
  • 企业利润分配如何缴纳所得税
  • 总分机构是什么
  • 公司与公司之间借款需要交税吗
  • 民办非企业单位是私立还是公立
  • 差额征税所得税怎么申报
  • 17点是多少点
  • 生产工人的费用属于什么会计科目
  • 委托企业和受托企业是什么意思
  • 票据行为为什么没有付款
  • 多缴所得税返还现金流
  • 其他业务活动包括
  • 往来款 分录
  • 失控发票进项税额转出申报表填写
  • 增值税进项没收到必须开销项怎么办?
  • 什么样的企业可以开专票
  • 案例分析建筑业差额征税如何进行账务处理?
  • 投资收益率如何确定
  • 职工教育经费税前扣除标准2023年
  • 房产税计税依据房产原值怎么算
  • 消费满额赠礼
  • 递延所得税年初数和期末数
  • 专用发票可以抵扣吗
  • 工伤赔偿工伤保险超出部分
  • 无形资产原值增加,净值减少的原因
  • 合并报表的范围
  • 开办费计入长期待摊费用汇算清缴时怎么填写
  • 高新企业认定条件2019
  • 如何解决WIN10系统文件夹只读属性不能更改
  • 雨林木风 u盘
  • 农业种植公司要纳税吗
  • bios是什么请简要介绍一下
  • 招标场地费怎么收
  • gradle视频教程
  • 应收票据贴现的会计分录
  • 进程mmc.exe
  • 解聘员工补偿金能拖欠吗
  • gridview用法
  • 下岗再就业有什么优惠政策
  • 计提本月附加税2496.28
  • Laravel5中Cookie的使用详解
  • 增值税上期留抵税额
  • linux 高并发网络编程
  • win11系统中怎样调整office底色
  • java基础网络编程
  • 冲红发票操作流程
  • 车辆转让后的责任谁承担
  • 财政拨款结转累计结转为负
  • 织梦cms怎么样
  • 织梦系统安装教程
  • 会计成本应如何结转
  • 商业承兑汇票贴现率
  • 关联交易纳税调整期限
  • 政府补助属于不征税金吗
  • 计提的管理费用要结转吗
  • 丢失增值税专用发票的征管政策
  • 进货时的运费计入什么
  • 个人原因指什么
  • 子公司向子公司销售存货
  • 小规模纳税人开专票需要交税吗
  • 现金流量表补充资料怎么理解
  • 企业营业外支出是什么意思
  • 会计凭证负数金额怎么算
  • sql server存储过程教程
  • iis支持什么后端语言
  • 如何制作ubuntu系统盘
  • centos查看某个端口
  • mac 怎么复制文件
  • edge以ie
  • 复制链接
  • cmd命令怎么重启
  • 用python写个脚本
  • 理解js绑定事件是什么
  • python解译器
  • android 开源框架
  • js滚动条滚动触发事件
  • 2023居民医保怎么交
  • 2020年军人自主择业条件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设