位置: 编程技术 - 正文

基于js中style.width与offsetWidth的区别(详解)(style js)

编辑:rootadmin

推荐整理分享基于js中style.width与offsetWidth的区别(详解)(style js),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:style js,js给style赋值,js中style属性,js操作style,js操作style,javascript中style,js设置style属性,js style.left,内容如对您有帮助,希望把文章链接给更多的朋友!

作为一个初学者,经常会遇到在获取某一元素的宽度(高度、top值...)时,到底是用 style.width还是offsetWidth的疑惑。

1. 当样式写在行内的时候,如 <div id="box" style="width:px">时,用 style.width或者offsetWidth都可以获取元素的宽度。

但是,当样式写在样式表中时,如 #box{ width: px; }, 此时只能用offsetWidth来获取元素的宽度,而style.width所返回的值为空。

2. style.width 获取的元素宽度只是div的宽度,不包括border、和padding所占的宽度,且宽度值是带单位px的。

offsetWidth 获取的元素宽度为width+border+padding的值(不包括margin),且返回值只为一个数值,不带单位。

如下面的例子所示:

基于js中style.width与offsetWidth的区别(详解)(style js)

控制台输出的第一个结果为: px

控制台输出的第二个结果为: 注:+ 3x2 +1x2 = , 且不带单位

3. style.width 也可以在js中用来设置元素的宽度,而offsetWidth不可以。

如下面的例子所示:

控制台输出的结果分别为 px px

也就是说通过style.width 设置宽度成功,而 通过offsetWidth设置宽度失败。

以上这篇基于js中style.width与offsetWidth的区别(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持积木网。

js设置随机切换背景图片的简单实例 实例如下:scriptvarimgs=["

React通过父组件传递类名给子组件的实现方法 React教程React是一个用于构建用户界面的JAVASCRIPT库。React主要用于构建UI,很多人认为React是MVC中的V(视图)。React起源于Facebook的内部项目,用来架设Inst

JS实现提交表单前的数字及邮箱校检功能 个人觉得一个工程中让用户提交表单时,用户提交的数据类型及内容不确定度都很大,用户不一定会完全理解设计者意思。所以提交表单前的校检是必

标签: style js

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

上一篇:浅谈webpack下的AOP式无侵入注入(webpack-loader)

下一篇:js设置随机切换背景图片的简单实例(js页面点击怎么随机生成图片)

  • 高新企业做亏损分析
  • 融资租赁和经营租赁的特点
  • 开户行为什么是中国建设银行总行
  • 会务费税前扣除材料
  • 专票没有税点
  • 增值税进项税额计算公式
  • 农产品加工需要交税吗
  • 普票冲红原票要退回吗
  • 外资企业研发中心
  • 抵账房好不好
  • 营改增后税额计算公式
  • 黄金珠宝加工怎么样
  • 预收账款开票怎么做账
  • 公司买了样品又退掉了怎么做分录
  • 社团会费收取标准和管理办法
  • 母公司借款给子公司作为投资
  • 事业单位的出纳要承担的责任是什么
  • 个体没有地址怎么办理执照
  • 环境保护税即将施行 有哪些点需要关注?
  • 金税盘非征期汇总资料未报送
  • 2019水利基金税率是多少
  • 收到境外公司服务费
  • 长期待摊未摊完处置如何账务处理
  • 贷款损失准备如何提取
  • 举办活动 举行活动
  • windows在cmd设置变量
  • 文件过滤什么意思
  • 滴滴代驾报酬
  • 电脑主板bios设置
  • 无法启用网络发展
  • awk命令怎么用
  • mac系统回到桌面快捷键
  • 职工宿舍的折旧计入什么科目
  • PHP:curl_multi_init()的用法_cURL函数
  • vue打包vendor文件过大
  • 不能报销的发票可以丢掉吗
  • 已经认证抵扣的发票怎么做账
  • yii2 resetful 授权验证详解
  • 冲账怎么写?
  • 无法偿还的应付账款计入什么科目
  • yii框架搜索分页modle写法
  • json解析漏洞
  • 银行发行债券流程图
  • mysqldump -s
  • SQLite3中的日期时间函数使用小结
  • 固定资产的财务业绩是什么意思啊
  • 进销存的原理
  • 电子承兑被退回要重新背书怎么办
  • 深圳税务2021
  • 价外费用含不含税
  • 收到加工费怎么做账务处理分录
  • 小规模防伪税控服务费多少钱
  • 住宿发票费率是多少
  • 缴纳增值税账务
  • 从基本存款账户划款3万元 向开户银行转帐
  • 冲销凭证如何做分录
  • 经营租入的固定资产计入什么科目
  • 个人开具的收据能税前扣除吗
  • 应税销售行为如何处理
  • 税控盘开具发票怎么冲红?
  • 注册公司没交社保
  • centos7安装MySQL5.6
  • 联想Thinkpad怎么进入安全模式
  • 在linux系统中命令
  • linux设置用户名和密码
  • linux7.2 sudo权限配置
  • linux文本文件格式
  • windows10用法
  • Android OpenGL ES(六)----进入三维在代码中创建投影矩阵和旋转矩阵
  • Android游戏开发实训总结
  • 被调用的对象已与其客户端断开连接怎么办
  • 简述android中色值原理与表示形式
  • python多线程操作
  • 接口回调java
  • nodejs bff
  • 安卓网络管理类app
  • 怎么在国家税务局查发票
  • 青岛税务局网上办税厅app
  • 车辆购置税需要每年都交吗
  • 进口天然气定价机制
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设