位置: 编程技术 - 正文

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

  • 进口报关商品的完税价格包含运费吗
  • 税控盘减免税款月末如何结转
  • 全国增值税发票查询平台 手机版
  • 收到政府的补贴收入现金流量表填哪里
  • 企业交的增值税怎么做账
  • 个人出租如何交税
  • 红冲以前年度收入成本的账务处理
  • 委托加工物资贷方
  • 现在的统计证还用年检吗
  • 年报过期了
  • 房地产增值税怎么算举例说明
  • 金税盘到期了
  • 专利费代缴
  • 0退税产品怎么征税
  • 境外劳务输出有哪些类型
  • 支付的劳务派遣服务费现金流量
  • 简易计税的应交所得税
  • 未收到发票可以计提成本吗
  • 煤炭企业税收政策
  • 外汇网上申报操作流程图
  • 物业公司的跨期收费如何确认收入?
  • 个人如何开专票
  • 网购iphone注意什么
  • 年底返利账务处理
  • 认缴出资怎么记账
  • 代扣的工会会费怎么做账
  • win10提示病毒
  • 认缴出资没到位违法吗
  • php数组函数大全
  • php面向对象编程
  • 赠送礼品进项税需要转出吗
  • 商住房买卖过户流程
  • 加工费计入什么成本类别
  • 2023新版拳击航母
  • defaultpool
  • Pytorch深度学习实战3-7:详解数据加载DataLoader与模型处理
  • thinkphp自定义标签
  • php源码抓取工具
  • 帝国cms模板文件在哪
  • python拆分文本文件
  • 公司以前没有内账
  • vue 生产环境
  • mongodb设置远程连接
  • 新旧会计准则口径
  • 税务异常怎么处理要多长时间
  • 股票股利怎么理解
  • 物业费的税可以抵扣吗
  • mysql5.6设置密码
  • 投资款要不要交企业所得税?
  • 保险合同包含什么
  • 煤炭资源税优惠政策
  • 预付款开了增值税专票怎么办
  • 实收资本有关会计科目
  • 电商公司不用交税吗
  • 兼营即征即退产品 增值税
  • 仓库员工工资
  • 租车费报销管理规定
  • 为什么委托代销业务受托方要反映或有负债
  • 增值税年末必须要交吗
  • 企业提取盈余公积的比例
  • 红字冲销凭证怎么登明细账
  • 原始凭证的基本内容
  • u盘启动盘如何克隆另外u盘
  • win10怎么用ghost
  • centos安装位置选择
  • xp系统无法停用wifi连接
  • 用xp系统打造
  • linux 系统查看
  • youphone.exe是什么
  • win10系统怎么找到桌面
  • nodejs cgi
  • node+express+ejs使用模版引擎做的一个示例demo
  • 猫的游戏视频
  • js入门基础教程
  • 简单介绍中秋节
  • android studio操作指南
  • 工会经费申报表在哪里查询
  • 常州税务局举报网站
  • 宿州税务总局
  • 虚开增值税专用发票罪量刑标准2023
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设