位置: 编程技术 - 正文

JS获取各种宽度、高度的简单介绍(js获取宽高)

编辑:rootadmin

推荐整理分享JS获取各种宽度、高度的简单介绍(js获取宽高),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js获取div宽度,js获取字符串宽度,js获取文字所占的宽度,js获取元素的宽度,js获取字符串宽度,js 获取dom宽度,js获取元素的宽度,js获取元素的宽度,内容如对您有帮助,希望把文章链接给更多的朋友!

有时候项目中会用到用js获取元素位置来定位元素,首先通过图片说明scrollWidth,clientWidth,offsetWidth的关系。

JS获取各种宽度、高度的简单介绍:

scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中,FireFox差异如下:

IE6.0、FF1.+:

clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border

IE5.0/5.5:

clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height

JS获取各种宽度、高度的简单介绍(js获取宽高)

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

offsetWidth (width+padding+border)

假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。获取对象可见内容的宽度,不包括滚动条,不包括边框;

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。

offsetWidth 与 style.width 的区别

一、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

二、offsetTop 只读,而 style.top 可读写。

三、如果没有给 HTML 元素指定过 top 样式,则 style.top 返回的是空字符串。

浅谈Javascript中匀速运动的停止条件 我们先来看下之前的匀速运动的代码,修改了速度speed后会出现怎么样的一个bug。这里加了两个标杆用于测试styletype="text/css"#div1{width:px;height:px;positi

javascript操作字符串的原生方法 join([分隔符])数组元素组合为字符串toString()以字符串表示数组reverse()数组反转--改变原数组本身valueOf()返回数组值htmlheadscripttype="text/javascript"varfruits=["苹

javascript定义变量时加var与不加var的区别 一、外部的为全局,内部的为局部变量。二、加var为局部变量(在方法内),不加var为全局变量(当方法内有一次使用后)scripttype="text/javascript"vargolbe="global";

标签: js获取宽高

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

上一篇:Javascript Object 对象学习笔记

下一篇:浅谈Javascript中匀速运动的停止条件(细说javascript)

  • 塑料制品开票税率
  • 应纳税额减征额包括哪些内容
  • 什么是资本利得?
  • 收到赠送的商品并销售
  • 电子发票打小了可以报销吗
  • 处置其他权益工具投资时,应按取得的价款
  • 高铁票抵扣税率怎么计算
  • 现金清查时,发现长款200元,未查明原因,经批准后转销
  • 流转税收入怎么算
  • 企业政策性搬迁损失的所得税处理
  • 产品成本核算过程
  • 评估增值的差额是什么
  • 个人所得税必须得交吗
  • 案例分析正当防卫
  • 个人所得税成本费用包括哪些
  • 免税发票上税率是多少
  • 佣金发票可以抵扣吗
  • 公司账上的钱如何取出来
  • 信用卡核销是什么意思
  • 资产账实不符说明
  • 企业其他应付款增加说明什么
  • 退回社保费的会议记录
  • 如何修改windows11开机密码
  • 以前年度损益调整借贷方向
  • 小规模纳税人个税怎么申报
  • 高新技术企业研发费占比
  • 购买的烟酒怎么入账科目
  • dsm是什么文件
  • linux系统之间拷贝文件命令
  • 关闭非系统进程
  • 销售折扣的税票怎么开
  • 什么情形不属于经警告无效人民警察可以使用武器的情形
  • 个人补缴的养老全部划入个人账户
  • php bi
  • 汇算清缴哪些表必填
  • 租入固定资产改良支出属于资本性支出吗
  • php实现的浏览器有哪些
  • cloa框架
  • 权重函数公式
  • php常用方法
  • Web前端开发知识点总结
  • 机器学习中的数学——距离定义(八):余弦距离(Cosine Distance)
  • css基础入门
  • python中模块的用法
  • 装修公司管理费是什么
  • 报税财务报表一定要填吗
  • 增值税普票遗失可否用复印件入账
  • 公司向法人借款会计分录
  • 个税申报汇算清缴流程
  • php怎么连接sqlserver
  • 金税盘购买的会计分录
  • 火车票可以抵扣进项吗
  • 企业管理费用科目期末一般是
  • 企业制造费用包括
  • 营改增现代服务中合同能源管理服务
  • 劳务外包存在的法律风险
  • 对外投资未实缴怎么办
  • 融资租赁与经营租赁的区别主要是
  • 差旅费住宿专票能否抵扣
  • 代理返利什么意思
  • 企业自查补交增值税
  • 收到的劳务发票怎么做账
  • 固定资产清理包括什么会计科目
  • 企业存货会计分录
  • 三星笔记是干什么用的
  • linux中磁盘分区
  • win7安装flash提示连接失败
  • mac装xp系统
  • 各种linux系统比较
  • javascript字符串操作函数
  • react基础入门
  • unity3D关于公共安全内容制作
  • onclick和onfocus
  • android:theme="@style/apptheme"
  • javascript语言基础
  • cocos2d安装
  • 什么叫党员双报到
  • 纳税人状态怎么填
  • 朝阳地税局官网
  • 所有企业都要做应急预案吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设