位置: 编程技术 - 正文

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

  • 税务基本任务和稽查范围?
  • 财务费用包含哪些项目
  • 起重机属于固定资产哪个类别
  • 购入固定资产入账
  • 四川网上电子税务局
  • 小规模企业发生了增值税,如何计提附加税
  • 运费的进项税
  • 企业微信里的钱
  • 银行手续费进项税怎么入账
  • 金税盘维护费申报
  • 去年的进项发票今年还能抵扣吗
  • 个人所得税可以退几年前的?
  • 单位发放中秋月饼价值有规定吗
  • 个人自产自销农产品免税政策
  • 无法支付的应付款怎么处理
  • 签订代销合同的人有没有退货权
  • 溢价发行的债券,当债券临近到期日时,债券价格
  • 自建的固定资产入账价值具体包括哪些
  • 应交税费待抵扣进项税额
  • 银行贷款利息支出汇算清缴需要调整吗
  • 财务怎么查询微信转账单号真假
  • 跨省非独立核算分公司如何报税
  • 单位为员工报销的博士学费算什么费用
  • 停车管理费什么时候交
  • 出口的货物因质量问题被扣款
  • 自然报废产生的固定资产净损失计入什么科目
  • windows11如何
  • 姑娘果的功效与作用百度百科
  • 原始凭证和记账凭证各应具备哪些内容
  • 良心推荐博主
  • 子公司财务管理策略有哪些
  • 办公用品开发票有哪些
  • php中undefined index
  • codeignitor
  • windowsserver2019产品密钥
  • 如何验证工具坐标系
  • php getcwd与dirname(__FILE__)区别详解
  • 施工单位奖金分配方案
  • 兼职工作是单位工作吗
  • 微信转账要如何退回去
  • 留抵退税税务总局规定的其他情形
  • 未开票收入下月开票
  • 织梦相关文章调用
  • vue打包找不到文件
  • linux服务器架设指南
  • PostgreSQL教程(十九):SQL语言函数
  • sql文件压缩
  • 职工工资加计扣除
  • 教育费附加减免性质代码
  • 子公司提取盈余公积
  • 场地租赁都需要交什么税
  • 如何结转完工产品成本和已销产品成本
  • 建筑业老项目发展现状
  • sql server执行语句
  • 2tb的硬盘够用吗
  • 部署rancher
  • ubuntu16.04安装拼音输入法
  • centos安装完成后重启进不去
  • WinCfg32.exe - WinCfg32是什么进程
  • 修改linux启动项
  • linux系统怎么查看root用户密码
  • pcc是什么文件
  • 笔记本win8为什么不能连无线
  • win10的hyper-v在哪
  • win8如何安装软件
  • 正在进行设备安装 win10安装打印机
  • linux安装bz2
  • node.js可以写接口吗
  • unity打包安卓apk
  • cssimage
  • css div高度填满父容器剩余空间
  • opengl用法
  • shell脚本解压tar文件
  • JavaScript事件类型中UI事件详解
  • javascript几种类型
  • python中运算符重载方法
  • 税务编号是什么 个人
  • 地税收税标准
  • 增值税劳务费发票图片
  • 轮胎消费税的征收环节
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设