位置: 编程技术 - 正文

基于js中style.width与offsetWidth的区别(详解)(style js)

发布时间:2024-02-27

推荐整理分享基于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页面点击怎么随机生成图片)

  • 企业进入
  • 金蝶利润表为什么没有收入
  • 贷款利息是否能降低
  • 企业收到劳务费发票账务处理
  • 出国考察需要什么手续
  • 租赁合同印花税计算
  • 哪些产品计算消费税时可以扣除
  • 发票丢失怎样写说明
  • 主营业务成本属于
  • 药店的成本费用有哪些
  • 生产前和生产后经常长喘气怎么回事
  • 契税可以银行转让吗
  • 文化事业建设费的征收范围
  • 案例分析:如何缓解幼儿在幼儿园的焦虑情绪
  • 赞助失败案例
  • 内部收益率的计算步骤有
  • 会计档案保管最新规定
  • 暂估销售收入怎么做分录
  • 增值税税率变动情况
  • 普通发票收款方账号信息错了可以正常报销吗
  • 买二手车转让费一般要多少钱
  • 公益捐赠税前扣除政策
  • 我的初级备考经验,认真就有收获
  • 签发空头支票的赔偿金
  • 辅助生产费用怎么归集
  • 企业筹办费会计处理
  • 对账单和电子回单区别
  • 甲供材料如何纳税
  • 按简易办法征收增值税
  • 转让金融商品应交增值税计算公式
  • 费用销售收入占比怎么算
  • win10运行红色警戒2卡顿
  • 苹果手机耳返功能怎么关闭
  • 收到投资款怎么做记账凭证
  • 赊销商品应收款
  • 增值税附加怎么入账
  • dedecms主页修改
  • PHP:Memcached::casByKey()的用法_Memcached类
  • 最薄的平板电脑是哪种
  • 购买财务软件会有操作流程吗
  • 摊余成本计量的金融资产若溢价购买小于
  • php进行批量任务分类
  • anaconda3.5.2安装教程
  • 2021前端热门技术解读
  • 研发人员工资计入什么科目
  • 命令行怎么管理员运行
  • 个人以不动产投资入股土地增值税
  • php上传不了文件
  • 咨询公司业务流程
  • 一般纳税人怎么开3个点普票
  • 小微企业的认定标准企业所得税
  • 财政专户资金支出
  • 何为居民企业
  • 公司充话费
  • 残保金缴纳额计算公式
  • 会计制度和会计准则科目转换
  • 小规模纳税人租赁费税率
  • 电子发票报销如何处理
  • 在建工程进项税额抵扣规定
  • 向非关联企业捐赠现金能不能抵扣
  • 代理出口业务会计分录
  • 商业企业进货会计分录
  • 删除sql server2019
  • win xp 添加网络打印机
  • freebsd常用命令
  • winxp程序和功能在哪里
  • linuxserver docker
  • cmd是什么意思 视频
  • wysafe.exe是什么
  • debian 单网卡设置双ip
  • python列表详解
  • python购物车100行代码
  • js字符串转为json
  • jquery .form
  • android基础入门教程
  • javascript要怎么学
  • python简要介绍
  • 辽宁省农村合作医疗2024怎么缴费
  • 购买材料如何计入成本
  • 从量定额资源税口诀
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号