位置: 编程技术 - 正文

基于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页面点击怎么随机生成图片)

  • 销项税减去进项税
  • 企业发生的印花税计入什么科目
  • 一般纳税人机电安装服务费税率是多少
  • 可供出售金融资产公允价值变动
  • 个体户查账征收需要交什么税
  • 税收分类编码如何查询
  • 车辆购置税计入成本吗
  • 增值税专票丢了能补开吗
  • 企业所得税税率
  • 银行存款可以红字吗
  • 程序法和实体法的划分标准
  • 有发票章的存根联可以当发票用吗
  • 广州二手房免增值税
  • 存货不同入账基数怎么算
  • 货到票未到怎么入账
  • 集团股份怎么分配
  • 项目结余是什么意思
  • 单位购买食品饮料的进项税可以抵扣吗?
  • 即征即退增值税政策
  • 中方人员取得的工资、薪金所得,征收个人所得税有特别规定吗?
  • 根据规定签发汇票凭证必须记载的事项有
  • 小型微利企业年度汇算清缴报哪些报表
  • 计提固定资产会计科目
  • 现金清查制度的内容包括
  • 工资薪金所得税前扣除项目标准
  • 负债转为投资 资本增加吗
  • 外聘人才一次性工资费用入账什么分录?
  • 苹果屏幕刷新率120hz的机型
  • 文化事业建设费减免政策
  • 每股收益增长率计算公式
  • php curl header参数
  • PHP json_encode() 函数详解及中文乱码问题
  • 魁北克位置地图
  • centos apache配置文件
  • outpost.exe - outpost是什么进程 有什么用
  • php完整教程
  • 未取得专用发票是否计算增值税
  • 债务重组收益的计算
  • php发送qq邮箱
  • 远眺格斯韦因斯泰因村和格斯韦因斯泰因城堡 (© Juergen Sack/Getty Images)
  • 建筑劳务费发票有进项抵扣吗
  • 摊销期在一年以内的费用
  • php接口技术
  • 城建税减半征收会计分录
  • 做工程没钱了可以贷款吗
  • 工资与劳务报酬是否合并缴纳个税
  • 低值易耗品如何摊销
  • mysql基本查询
  • 支付宝企业账户怎么注销
  • 小规模教育培训怎样纳税
  • 报销发票哪些可以抵税
  • 买一赠一是什么促销方式
  • 资产负债表多久编制一次
  • 公司基本账户提额怎么算
  • 企业的哪些支出不得列入成本费用原因
  • 借别人账户过钱
  • 免税小规模企业增值税申报表怎么填
  • 应交税金-应交增值税明细账
  • 建安行业外地预审要多久
  • 企业送给客户的礼品怎么做分录
  • 收购农产品没有发票
  • 农行网银只有一张卡吗
  • 分公司可以设立公司吗
  • 会计结转是什么意思
  • java异常后面的语句会运行吗
  • win7系统修改
  • Win10中SmartScreen无法设置需要系统管理员身份该怎么办?
  • Linux桌面环境选择
  • 安装双系统之后win10进不去
  • win8功能
  • windows8装windows10,文件会丢失吗
  • linux系统监控脚本
  • 京东试用js脚本
  • bootstrap和thymeleaf
  • 手把手教你用python破解wifi
  • csgo视角指令锁定枪械摇晃
  • python中的变量
  • 广告费扣除限额15%和30%
  • 银行存款利息收入现金流量表计入哪
  • 日本海关关税税率表
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设