位置: 编程技术 - 正文

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

  • 个人所得税怎么申报退税
  • 所得税汇算清缴分录怎么做
  • 员工加班餐费计入会计什么科目
  • 收到没有填税号的短信
  • 一般纳税人所得税是季报还是月报
  • 股本溢价如何计税
  • 没开发票可以确认收入吗?
  • 电商平台退货退款流程图
  • 单位定期存款如遇利率调整,不论调高调低
  • 股权投资损失该如何做账务处理及税前扣除相关规定
  • 支付宝手续费由谁承担
  • 工会费入账科目
  • 个人企业属于什么部门管理
  • 金税三期理解
  • 补偿金需要缴纳个税分开
  • 股东垫资需要偿还吗
  • 技术开发加计扣除
  • 土地增值税规定中央空调属于房屋建筑物吗
  • 权益净利率计算公式推导
  • 下雨被水淹
  • 进项税转出如何做分录
  • 委托贷款利息收入增值税
  • 企业所得税以前年度所得调整
  • 如何在没有开瓶器的情况下开红酒
  • mac auto tune
  • 圣米歇尔山 (© Leroy Francis/Getty Images)
  • 增值税一般纳税人资格登记表
  • 契税计税依据是成交价还是评估价?
  • SpringBoot + Vue基本知识点荟萃
  • 企业清算所得税政策
  • 简易html代码
  • php 7.4
  • phpcms建站流程
  • CSS SandBox
  • 进口增值税抵扣期限
  • 应付账款为什么要算增值税
  • SQL Server FileStream详解
  • python3 静态方法
  • 企业税金及附加包括什么
  • 调减加计抵减额什么意思
  • 信息采集需要填写不动产权证书号吗
  • 系统带我玩隐形守护者 小说
  • 测绘费 土地增值税
  • 报销发票哪些可以抵税
  • 运输开票的税点是多少
  • 结转产品成本怎么算
  • 漏缴增值税处罚规定
  • 资产负债表日后非调整事项应当在附注中披露
  • 周转材料包装物的账务处理
  • 福利费属于管理费用还是销售费用
  • 残值收入交税吗
  • 增发股票会计科目
  • 预期信用损失影响损益吗
  • 私营公司无形资产怎么算
  • 商业企业批发商是什么
  • win10 性能选项
  • centos安装常用命令
  • bios如何设置
  • win10声音突然变得很沉闷
  • mac os如何安装软件
  • ubuntu发行版介绍
  • 用diskgenius硬盘格式转换怎么使用
  • win10收不到20h2更新
  • win7系统局域网无法看到其他电脑
  • windows7开机显示错误恢复进不去
  • windows 10预览版
  • win8安装ie11
  • python的模块和包
  • linux命令sed的用法
  • jquery easyui validatebox remote的使用详解
  • angular.js
  • jquery常用操作
  • jquery的循环
  • python类属性和类方法
  • java script
  • jquery 插件写法
  • 建筑企业如何
  • 什么是联保发票呢
  • 三证合一开票信息
  • 为什么国税网上申报不了
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设