JS 中offset 的小bug 与解决方案。
一、发现bug准备工作,先定义一个div,然后给div加上样式
效果图如图所示:
二、编写正常的代码,同时给div加上一个id
会发现div图会向左缩进。。。直至消失。
三、添加代码border =1 solid,这时会出现问题。
发现应该缩进的div却是以增长的形式而增加。如图所示:
。
这是为什么呢????画个图看一下

四、解决办法。
不用offset,用自己本身的width。
但是如果使用oDiv.style.width时,style样式只在行间有效。看到这里,也许会有些人会问,什么是行间样式。
行间样式就是直接在div里面定义样式,如
,行间样式看起来没有在<style>标签用的方便,所以我们不想用行间样式,但是却想得到style.width的时候呢?
我们这时候可以采用获取样式的其他方法,currentStyle,还有getComputedStyle.因为兼容关系,我们要编写一个函数,使在浏览器兼容获取样式。
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
然后再使用该函数
。
然后打开火狐浏览器看一下。发现div模块如我所愿,逐渐减小,而不是逐渐递增。。

JS 中offset 的小bug 与解决方案。的更多相关文章
- IOS9.0中hash值的bug与解决方案
事件起因 事情是这样的:产品上线发布,突然出现了问题.运营Gg过来反应,当场给露珠演示,运营同事的手机是iphone,bug确实是存在的.奇怪的是露珠用了其他iphone手机(借别人的,露珠的是吊死安 ...
- (原创)WinForm中莫名其妙的小BUG——ComboBox 尺寸高度问题
一.前言 使用WinForm很久了,多多少少遇到一些小BUG. 这些小BUG影响并不严重,而且只要稍微设置一下就能正常使用,所以微软也一直没有修复这些小BUG. 本来并不足以写篇文章去记录,但是昨天遇 ...
- (原创)WinForm中莫名其妙的小BUG——RichTextBox自动选择字词问题
一.前言 使用WinForm很久了,多多少少会遇到一些小BUG. 这些小BUG影响并不严重,而且稍微设置一下就能正常使用,而且微软一直也没有修复这些小BUG. 写本系列文章,是为了记录一下这些无伤大雅 ...
- js中setTimeout()的使用bug
今天用setTimeout()时,遇到一个奇怪的现象,通过多方面的查询,最终解决了问题,这是setTimeout()设计的时候存在的一点点bug. 代码的作用主要是在三秒后自动关闭本浏览器窗口: 代码 ...
- JS中toFixed()方法的问题及解决方案
最近发现JS当中toFixed()方法存在一些问题,采用原生的Number对象的原型对象上的toFixed()方法时,规则并不是所谓的“四舍五入”或者是“四舍六入五成双”,所谓“四舍六入五成双”,在百 ...
- js 中的一些小技巧
js 数字操作: 1.1 取整: 取整有很多方法如: parseInt(a,10); Math.floor(a); a>>0; ~~a; a|0; 前面2种是经常用到的,后面3中算是比较偏 ...
- JS中数组方法小总结
1.array.concat(item……) 返回:一个新数组 该方法产生一个新数组,它包含一份array的浅复制,并把一个或多个参数item附加在其后.如果参数item是一个数组,那么它的每个元素会 ...
- js 中继承方式小谈
题外话 前段时间面试中笔试题有这道题目: 请实现一个继承链,要求如下: 构造函数A():构造函数中有consoleA方法,可以实现console.log("a") 实例对象 a:a ...
- js中的变量小例子
s中的变量function foo(){ n=99;}alert(n);//undefined,因为没有调用该函数 function foo(){ n=99;}foo();alert(n);//99, ...
随机推荐
- JS ajax请求参数格式( formData 、serialize)
$("#importBtn").click(function(){ if($("#conId").val() == ""){ alert(& ...
- tolua 转换 std::shared_ptr
tolua 转换 std::shared_ptr 自从c++11以后std::shared_ptr几乎是比用的东西,经常会遇到类似如下应用 std::shared_ptr<Tst_ShareTe ...
- 记一次java电话面试
答案补充中... 一.java基础 1.简述java的几种基本数据类型 JAVA的基本数据类型有:byte.char.boolean.short.int.long.float.double 2.什么是 ...
- python爬虫---selenium库的用法
python爬虫---selenium库的用法 selenium是一个自动化测试工具,支持Firefox,Chrome等众多浏览器 在爬虫中的应用主要是用来解决JS渲染的问题. 1.使用前需要安装这个 ...
- 解决讨厌的警告 WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable
问题: 执行任何hadoop命令,都会提示如下WARN.虽然影响不大,但是每次运行一个命令都有这么个WARN,让人很不爽,作为一个精致的男人, 必须要干掉它. [root@master logs]# ...
- awk命令基本使用方法
awk命令 基本用法 awk '{print $1, $4}' netstat.txt 单引号中大括号的部分就是awk语句 $1至$n表示第几列,$0表示整行 格式化输出的方法 $ awk '{pri ...
- css定义好看的垂直滚动条
滚动条的css样式主要有三部分组成: 1.::-webkit-scrollbar 定义了滚动条整体的样式: 2.::-webkit-scrollbar-thumb 滑块部分: 3. ...
- sql 存储过程和触发器
mysql----------------------------------------------------------------------------------------------- ...
- ASP.NET Core 1.1版本之Hello word
1.下载ASP.NET Core 1.1版本,并且安装. 2.新建一个工作文件夹,本文以WebApiFrame名称为例建立一个新的文件夹: mk WebApiFrame 3.启动命令行,在命令行中进入 ...
- boolean表达式与在if条件中的运用
1.boolean语句 boolean 类型的数据 有两个值 false 和true; 2.在if判断的条件语句中 例如: boolean arn =false 在if 判断的括号中可以表示为 !a ...