位置: 编程技术 - 正文

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

  • 综合保税区是什么意思,举个例子
  • 国税地税电子钥匙价格
  • 查看企业用什么软件
  • 资金账户托管协议
  • 专票小数点没打印齐能用吗
  • 企业筹建期间利息支出税前扣除怎么算
  • 发票上的销货方是什么意思
  • 运输费计入原材料成本吗
  • 政府补贴中介合法吗
  • 增值税负率怎么算
  • 预收账款怎样清零
  • 人民币结算意味着什么
  • 水利建设专项收入怎么报税
  • 调整交易性金融资产
  • 变更税号后地税个税申报系统还是显示老税号怎么办?
  • 反倾销税由谁缴纳
  • 航天信息服务费的会计分录
  • 这些常用的发票知识,你都知道了吗?
  • 企业所得税每季度申报时间
  • 税控盘没清盘怎么处罚
  • 支付装修押金的会计科目
  • 同一控制下合并对价怎么算
  • 通过拍卖取得的车牌号,过期了怎么办
  • 应交增值税与预交增值税报告如何披露
  • ubuntu18.04 u盘安装
  • 应收账款转让的风险
  • win10系统多任务功能的快捷键
  • 内部审计范围有哪些
  • 绿萝怎么扦插?
  • Dardanup郡的小矮人村,澳大利亚 (© Amanda Hughes/Alamy)
  • 成本法的优点是计算较为简便,缺点是
  • 黑白相间表带
  • html5新增的标签元素有哪些
  • 个人往来款如何转为公司股权
  • js基本数据类型和复杂数据类型的区别
  • 生产车间的辅助记录
  • dedecms进入数据库
  • php脚本加密
  • 销售折扣收货方法有哪些
  • win7怎么配置
  • 预收账款确认的条件
  • 应收账款平均余额怎么理解
  • 给保安买大衣算贿赂吗
  • 1元换购的商品是正品吗
  • 开公司合理避税的方法
  • 会议费报销时应当提供哪些材料
  • 任何单位和个人都应当()为报警
  • 销售部购买电脑一台分录
  • 租赁车子
  • sql导入csv数据
  • win8 更新
  • win7系统的wlan在哪里?
  • win8自动启动项怎么设置
  • window mobile系统
  • Win10预览版更新弹窗如何关闭
  • win10在更新界面怎么办
  • linux防火墙命令大全
  • ie等级
  • unity shader lerp
  • opencv python
  • rapidjson使用
  • cocoscreator shader
  • js按照指定顺序排序
  • 自定义控件英文
  • css兼容浏览器
  • shell脚本随机数
  • 绑定安卓
  • unity uGUI按钮点击换图
  • JavaScript电子时钟倒计时第二款
  • jquery动态添加div
  • python 变参
  • python发送邮件的模块
  • jQuery.Callbacks()回调函数队列用法详解
  • 怎么查询购置税交了没有
  • 补发上个月的工资怎么做账
  • 江苏个体户年报怎么填
  • 江苏省官网
  • 电子增值税专用发票和纸质增值税专用发票的区别
  • 加拿大鹅海关被税交多少
  • 销售税金含增值税怎么计算企业所得税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设