位置: 编程技术 - 正文

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

  • 建筑业增值税税额怎么算
  • 以前年度损益调整在借方是什么意思
  • 春节补贴是加还是减
  • 税控系统维护费怎么做会计分录
  • 员工的生日津贴怎么发
  • 契税为什么计入成本
  • 跨月作废增值税专用发票
  • 出租的土地使用权是无形资产吗
  • 暂时没开发票的销项税需要做账吗
  • 一般纳税人收到普票怎么做分录
  • 进口货物关税计入成本吗
  • 一般纳税人季报利润表怎么填
  • 个人开技术服务费税率是多少
  • 出售无形资产的会计科目
  • 委托生产企业和受托生产企业
  • 个人转让认缴出资股权需要交纳印花税吗?
  • 企业重组中撤资所得税有哪些处理规则?
  • 农产品加工业数据
  • 不动产发票丢了怎么办理房产证
  • 个人劳务法律规定
  • 工资三金是指哪三样
  • 个人所得税怎么交的,怎么算的
  • 增值税退税金额怎么算
  • 报销通行费会计分录
  • 银行承兑汇票贴现流程
  • 筹建期的开办费需要归集后才能一次性扣除吗
  • 房产税和城镇土地使用税
  • 腾讯手游助手如何退出登录
  • php排队系统
  • 公司赚的钱要交税吗?交多少?
  • ospf区域间路由和区域内路由
  • 出差海外
  • 商业汇票转让后,能否追索前手
  • php操作mysql数据库
  • 叶面积指数名词解释
  • php怎么写数据库
  • vue路由传参的几种方式
  • 工程施工科目下的间接费用怎么使用
  • 火遍全网的超燃神曲旋律震撼人心,听完热血沸腾!
  • 图像识别算法汇总表
  • 购买加油卡需要什么证件
  • 实收资本核算内容是什么
  • 应付账款的主要成本包括
  • 养老保险减免退税政策
  • 小规模纳税人转一般纳税人的条件
  • 计提贷款损失准备的意义
  • 行政单位拨出经费的规定
  • 递延所得税资产和负债账务处理
  • 检测费可以抵扣吗
  • 一般纳税人资格证书怎么查询
  • 银行代扣水费分录
  • 直接人工标准工时计算公式
  • 跨年度未开发票第二年如何做确认收入?
  • 小规模纳税人的认定标准是什么
  • 公司发放工资的形式
  • 填制凭证的主要内容和注意事项
  • 银行汇票的适用主体
  • mysql外键是什么意思
  • Linux系统中管理员如何获得root权限
  • win 10 ie8
  • ubuntu磁盘清理工具
  • Windows更新失败
  • 开启电脑上帝模式
  • win10系统自带的浏览器叫什么
  • 电脑硬盘磁盘是什么材料
  • xshell如何使用
  • centos查看inode
  • windows 8 build 8148
  • linux网卡添加vlan
  • nodejs ejs
  • python内置方法大全
  • python黑帽子怎么样
  • python中pyinstaller
  • Android网络通讯哪个最简单
  • 税控盘登录密码忘了怎么办怎么重置
  • 商铺 评估价
  • 开票员怎么登录电子税务局进行开票验证
  • 个体户注销还要交税吗?
  • 高新企业公布
  • 车辆购置税交了怎么查询不到
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设