JS中offsetWidth的bug及处理方法
这篇文章主要为大家详细介绍了JavaScript中offsetWidth的bug及解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
offsetWidth表示对象的可见宽度。
比如：
#p1 {
width: 100px;
height: 200px;
background: red;
}结果：100
#p1 {
width: 100px;
height: 200px;
background: red;
border: 2px solid black;
}结果：104 (100 + 2 + 2)
#p1 {
width: 100px;
height: 200px;
background: red;
border: 2px solid black;
padding: 20px;
}结果：144 （100 + 2 + 2 + 20 + 20）
#p1 {
width: 100px;
height: 200px;
background: red;
margin: 4px;
}结果：100
**
所以，offsetWidth = width + padding + border， 和margin无关。
**
下面来看一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>offsetWidth</title>
<style type="text/css">
#p1 {
width: 500px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var op = document.getElementById('p1');
setInterval(function() {
op.style.width = op.offsetWidth - 1 + 'px';
}, 50);
</script>
</body>
</html>现象：红色p逐渐变窄，直到消失，没问题！
如果给p加一个border，呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>offsetWidth</title>
<style type="text/css">
#p1 {
width: 500px;
height: 200px;
background: red;
border: 1px solid black;
}
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var op = document.getElementById('p1');
setInterval(function() {
op.style.width = op.offsetWidth - 1 + 'px';
}, 50);
</script>
</body>
</html>现象：红色p不仅没有变窄，反而越来越宽……
*
原因也很简单：就是border的直接原因，因为offsetWidth是把border算进去的，定时器轮询的时候，第一次，width : 102 - 1 == 101 ,那么offsetWidth立马就变为103；第二次，width: 103 - 1 == 102, 那么offsetWidth立马就变为104；紧接着第三次，width: 104 - 1 == 103, offsetWidth就为104了……
倘若把 op.style.width = op.offsetWidth - 1 + ‘px'; 换成 -2，那么红色p就不动了，不会变宽也不会变窄，因为offsetWidth为102，减去2就是100和原本的width相等，下一次循环，offsetWidth就等于100加上border的2，再减去2还是100，所以不动……*
解决方案也很简单，惹不起还躲不起？不用offsetWidth了！
我们都知道，获取元素的行间样式直接用element.style.width即可，但是这只针对元素的行间样式，如果写在css中，你就获取不到了.
但也是有办法的:
IE中用element.currentStyle.width / element.currentStyle.[‘width'];
非IE中用getComputedStyle(element, false)[‘width']
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>offsetWidth</title>
<style type="text/css">
#p1 {
width: 500px;
height: 200px;
background: red;
border: 1px solid black;
}
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var op = document.getElementById('p1');
function getStyle(obj, attr) {
if (obj.currentStyle) {//IE
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
alert(getStyle(op, 'width'));//直接弹出 “500px”
</script>
</body>
</html>有了上面的这个封装，我们就可以解决offsetWidth带来的困扰了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>offsetWidth</title>
<style type="text/css">
#p1 {
width: 500px;
height: 200px;
background: red;
border: 1px solid black;
}
</style>
</head>
<body>
<p id="p1"></p>
<script type="text/javascript">
var op = document.getElementById('p1');
function getStyle(obj, attr) {
if (obj.currentStyle) {//IE
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
setInterval(function() {
//parseInt是因为getStyle()返回的是‘px'带单位，要整数化
op.style.width = parseInt(getStyle(op, 'width')) - 1 + 'px';
}, 30);
</script>
</body>
</html>【相关推荐】
2. JavaScript表单验证实现代码_javascript技巧
5. Bootstrap 表单验证formValidation 的实例详解
以上是JS中offsetWidth的bug及处理方法的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何使用JS和百度地图实现地图平移功能
Nov 21, 2023 am 10:00 AM
如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
如何使用PHP和JS创建股票蜡烛图
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3
游戏bug是什么意思
Feb 18, 2024 am 11:30 AM
游戏bug是什么意思在玩游戏的过程中，我们常常会遇到一些意想不到的错误或者问题，比如角色卡住、任务无法继续、画面闪烁等等。这些不正常的现象就被称为游戏bug，即游戏中的故障或错误。在本文中，我们将探讨游戏bug是什么意思以及对玩家和开发者的影响。游戏bug是指在游戏的开发或运行过程中出现的错误，导致游戏无法正常进行或者出现不符合预期的情况。这些错误可能是由于
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤
Dec 17, 2023 pm 06:55 PM
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的
苹果iOS18bug汇总
Jun 14, 2024 pm 01:48 PM
随着苹果WWDC发布会2024圆满落幕，不仅揭晓了macos15，其中最受关注的还是苹果iOS18新系统的更新，虽然有很多新功能出现，但是作为苹果iOS18首版不免让人纠结是否有必要升级苹果iOS18，在最新发布的苹果iOS18中又有哪些BUG存在呢？经过真实的使用测评，下面是苹果iOS18bug汇总，一起来看看吧。目前有许多iPhone用户都抢先升级到了iOS18.但各种系统Bug让人难受。有博主表示，升级iOS18要谨慎，因为“Bug多到飞起”。博主表示，如果你的iPhone是
如何使用JS和百度地图实现地图点击事件处理功能
Nov 21, 2023 am 11:11 AM
如何使用JS和百度地图实现地图点击事件处理功能概述：在Web开发中，经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能，并给出具体的代码示例。步骤：导入百度地图的API文件首先，要在HTML文件中导入百度地图API的文件，可以通过以下代码实现：
如何使用JS和百度地图实现地图热力图功能
Nov 21, 2023 am 09:33 AM
如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP
