位置: 编程技术 - 正文

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

  • 自来水水费增值税发票票样
  • 文化传媒公司的税种及税率
  • 子公司之间股权转让
  • 无票收入在增值税表中填哪
  • 建筑公司办公室照片真实
  • 小规模纳税人的起征点是多少
  • 包工包料的税率2023
  • 淘宝买货没有发票
  • 居民企业股权转让所得
  • 税务局开运费发票需要带什么
  • 企业捐赠不动产 会计分录
  • 抵债资产涉税问题
  • 超市费用能否税前扣减?
  • 应收账款入账金额的确定方法
  • 旧货如何卖
  • 企业所得税收入是含税还是不含税
  • 美国边境管理体制
  • 关于抄税的详细介绍
  • 怎么计提所得税费用
  • 股票派息后会除权吗
  • win11正式版好用吗
  • win11怎么回到10
  • Win10专业版家庭版企业版
  • 每日盈亏报表怎么算
  • 土地增值税清算方法与技巧
  • 外购无形资产发生的交易费用
  • 公司购买电脑流程怎么做
  • 中秋福利发放现金文案怎么写
  • php sybase_fetch_array使用方法
  • 工程施工科目借贷方向
  • 备用金借款有利息吗
  • 销售货物是什么意思
  • 伊莎贝尔公主
  • 销售商品的会计分录已收到钱
  • 喝薏米红豆水最佳时间
  • 除甲醛的净化器哪个品牌做得最好
  • 国有土地租赁合同规定多少年
  • LIO-SAM学习与运行测试数据集
  • 应收账款如何做会计分录
  • 商业一般纳税人增值税税负率最低多少
  • 退休返聘人员是否享受工会福利
  • json与json字符串
  • php连接mysql数据库的几种方式及区别
  • 资产负债表应交税费计算公式
  • vue3.0动态路由
  • php字符串编码转换
  • 什么是会计确认的基础
  • 增值税发票2年了还能开吗
  • 固定资产被替换的账面原值怎么算
  • deepin 15.3 X64系统中安装mongodb的方法步骤
  • 查询不到shsh怎么回事
  • 股权转让所得如何申报个税
  • 财务报表审计的基础是独立性和专业性
  • 购买的金税盘可以抵扣吗
  • 权责发生制是根据发票入账吗
  • 汇算清缴如何调报表
  • 中标服务费如何赋码
  • 应收票据周转率公式
  • 出口退回的增值税计入哪个会计科目
  • 怎样分辨假钱
  • 年报中的认缴出资时间怎么填
  • ubuntu debain
  • MySQL下载安装视频
  • sql语句优化之用是什么
  • 目前默认系统%1
  • 获取mac命令
  • fedora怎么样
  • version 2什么意思
  • surface 优惠
  • centos6.5破解密码
  • qctray.exe - qctray进程 是什么文件 作用是什么
  • linux系统ll
  • 快速批量取关
  • linux tcp keepalive
  • sed查找字符串
  • android录音软件
  • jquery图片
  • javascript数学函数
  • 广州市税务局长
  • 个人所得税赡养老人可以填两个吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设