最近在改版自已的一个网站的时候,遇到了一个问题。

  

  用jquery的width()函数获取元素宽度的时候,返回得到的是整数,而不是小数。

  

  如下图,谷歌上显示的宽度为1078.89px

  

  

  而我用控制台输出了 console.log( $('.mid-list').width() ); 结果如下

  

    

  为了排除先入为主的认为四舍五入,我又调整了元素的宽度,为1079.1px

  

  得出的结果,依然是1079

  

  显然,其算法确实是四舍五入。

  以防万一,我又试了document.getElementById().offsetWidth,得出的结果一样(显然jquery没有对js做什么过分的行为╮(╯_╰)╭)

  以上,在大多数情况下,完全符合我们对js算法的要求,也是十分合理的设定。

  但是,在这次我在改版网站的时候,打算用js来获取父元素宽度,再以此来算出内部元素之间的margin,并赋值。

  结果不尽人意,获取width的时候得到的数据不准确,四舍的时候还好,但是五入的时候,原本的1078.89被算成了1079,从而计算出的margin略大,导致了内部元素的间隔不准确。

  在本次情况的解决方法(只适用本次情况,类似width 五入后,导致计算值略大):将得到的width减一,也即 $('.mid-list').width() -1 , 虽然可能会导致计算出的margin略小,但是做前端的都清楚,“略大”比“略小”造成的危害要大很多。

  

关于 jquery和js获取宽度时只能取整数,取不到小数点的更多相关文章

  1. Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法

    Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法 2014-03-27 11:44:46|  分类: Easy UI|举报|字号 订阅     可以使用$.parser.pa ...

  2. js限制文本框只能输入整数或者带小数点[转]

    这篇文章是关于js限制文本框只能输入整数或者带小数点的内容,以下就是该内容的详细介绍. 做表单验证的时候是否会碰到验证某个输入框内只能填写数字呢,仅允许输入整数数字或者带小数点的数字.下面这段代码也许 ...

  3. jquery、js获取页面高度宽度等

    jquery获取页面高度宽度 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window).width(); ...

  4. Jquery和JS获取ul中li标签(转)

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  5. Jquery和JS获取ul中li标签

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  6. js获取宽度设置thickbox百分比

    thickbox的宽高不好设为百分比,这样遇到不同的尺寸的电脑就会出现问题. 怎么做呢? 通过js来处理. <script type="text/javascript"> ...

  7. 对比js库分枝Jquery和js获取对象的方式

    一.Jquery和JS的认识 对于这点不谈详细,但能有一个能有一个全面的印象,Jquery本质上也是JS,只不过用一句话概括就是   “write letter and do more”,写的更少,做 ...

  8. jquery.cookie.js 获取不到cookie的值

    最近使用$.cookie获取cookie 的值.发现完全取不到.看了浏览器里也存了对应的值.可以添加,但是就是取不到., 折腾了半天,后来突然想起来加了个有可能带汉字的cookie键值.删掉就可以取出 ...

  9. JS获取年月日时分秒

    var d = new Date(); ) + "-" + d.getDate() + " " + d.getHours() + ":" + ...

随机推荐

  1. 比较常用到的一些linux命令行

    find ./ -type f -name "*.c" | xargs grep -l "tm_common_ctrl_init_chip_init"     ...

  2. 也谈微信小程序

      小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念,用户不关心是否安装太 ...

  3. Frameset框架优缺点--来自新浪微博

    原文地址:http://blog.sina.com.cn/s/blog_4a4b1b010100p6ro.html HTML框架简述   一个浏览器窗体可以通过几个页面的组合来显示.我们可以使用框架来 ...

  4. DataAnnotations里DisplayAttribute和 ValidationAttribute 如何从资源文件读取信息,显示多语言

    这个是我们常见的AccountModel代码 public class ChangePasswordModel { [Required] [DataType(DataType.Password)] [ ...

  5. 所有的cursor图标

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 基于spring+quartz的分布式定时任务框架

    问题背景 我公司是一个快速发展的创业公司,目前有200人,主要业务是旅游和酒店相关的,应用迭代更新周期比较快,因此,开发人员花费了更多的时间去更=跟上迭代的步伐,而缺乏了对整个系统的把控 没有集群之前 ...

  7. AngularJs的UI组件ui-Bootstrap

    http://www.cnblogs.com/pilixiami/p/5597634.html

  8. 一个可拖拽的DIV框框

    http://codepen.io/lrelia/pen/bEyLB 使用了JQuery UI库, draggable来自于JQuery UI库

  9. 通过正则表达式实现简单xml文件解析

    这是我通过正则表达式实现的xml文件解析工具,有些XHTML文件中包含特殊符号,暂时还无法正常使用. 设计思路:常见的xml文件都是单根树结构,工具的目的是通过递归的方式将整个文档树装载进一个Node ...

  10. Dynamics AX 2012 R2 业务系列

    在之前的一系列博文里,Reinhard介绍了Dynamics AX Demo的安装与配置.相信同学们看完后,都已经成功拥有了一个测试环境. 众所周知的是,ERP作为一个特殊的软件系统,他有着背后的业务 ...