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

  

  用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. 网页3D引擎“Babylon.JS”入门教程翻译总结

    使用三个月的业余时间把官方教程的入门部分译为中文并上传到github,在下一步编程前做一个总结. 历程: 最早接触游戏编程是在大三下学期,用汇编语言和实验室里的单片机.触摸屏.电机(提供声效)编的打地 ...

  2. ElasticSearch作为Windows服务启动

           由于公司服务器用的Windows服务器,所以你懂得…… 直接下载elasticsearch中文发行版.下载地址是:https://github.com/medcl/elasticsear ...

  3. 漂亮的CSS按钮样式集以及在线生成工具

    以前我们制作一样带带阴影.圆角或3D感的按钮都需要用图片来制作,但CSS3出来后就可以不用图片了,由于是代码写的按钮样式,在Retina上浏览依然清晰美观.虽然不错,但我们写一个阴影+质感的按钮还是挺 ...

  4. Mac终端用Sublime打开指定文件或文件夹

    首先你先把的sublime放到Application中,再确认您的Sublime的路径是否正确 1 创建别名: sudo ln -s "/Applications/Sublime\ Text ...

  5. C#字符串的方法

    static void Main(string[] args) { StrMethod(); } public static void StrMethod() { string myString = ...

  6. eclipse 安装activity插件

    公司做流程需要用到流程插件,之前用了bpm4 activity是基于bpm4延伸的,这里先介绍下activity 插件是如何安装的 官网资料 *Name:*Activiti BPMN 2.0 desi ...

  7. 【原创】Android ExpandableListView使用

    ExpandableView的使用可以绑定到SimpleExpandableListAdapter,主要是看这个Adapter怎么用. 这个类默认的构造函数有9个参数, 很好地解释了什么叫做又臭又长. ...

  8. 浅谈 Scrapy 爬虫(二)

    越写越像官方文档的翻译,偏离了初衷.写一些官方文档里没有的内容吧.   在不限制宽带的环境下,根据页面的大小, Scrapy 一秒能爬取40-70个页面,一天在400万到600万页面.也就是说 Scr ...

  9. dr.wondr博士随笔之三星某智能机的SGHXXXX 的取证恢复一例

    大家好!欢迎今天再次来到我dr.wonde的博客, 今天我给大家带来一款三星镜面古董机SGH-E848的取证展示! 三星SGH-E848是一款非常漂亮的镜面手机,2008年出厂.. 上面黄色是97号数 ...

  10. Hibernate 基础配置及常用功能(一)

    本来是想等全部框架测试完以后再统一发布的,但是随着测试的一点点增加感觉把需要叙述的东西放在一起终将会是一场灾难.所以还是打算分成几章来描述,其中还包括一些有待解决的问题.短期很难腾出时间来仔细阅读Hi ...