关于 jquery和js获取宽度时只能取整数,取不到小数点

  

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

  

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

  

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

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

  

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

得出的结果,依然是1079

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

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

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

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

在本次情况的解决方法(只适用本次情况,类似width 五入后,导致计算值略大):将得到的width减一,也即 $(‘.mid-list‘).width() -1 , 虽然可能会导致计算出的margin

略小,但是做前端的都清楚,“略大”比“略小”造成的危害要大很多。

  

时间: 2024-11-07 03:00:43

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

Jquery和JS获取ul中li标签

js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签 或 var div=document.getElementById('a'); var ul=div.childN

js获取宽度设置thickbox百分比

thickbox的宽高不好设为百分比,这样遇到不同的尺寸的电脑就会出现问题. 怎么做呢? 通过js来处理. <script type="text/javascript"> $(function(){ var width = window.screen.width;//通用,各浏览器都支持获取宽度 width = width*0.5; var height = window.screen.height; height = height*0.66; $(".setSi

js输入控制(只能输入整数小数等)

1.页面 <asp:TextBox runat="server" ID="NumZYZCZMJ" OnKeyUp="InputFloat(this)"></asp:TextBox> 2.JS //只能输入整数        function InputNumber(e) {            e.value = e.value.replace(/\D/g, "");            if (e

用js获取视频播放时长

用js实现读取本地mp4文件时长 利用h5 video标签加载视频文件,在读取duration就可以了 问题在于要更换文件,使用<input type="file" > 标签发现读取的文件路径是隐藏的c:/fakepath/xxx.mp4 给video更换src时候会提示找不到文件... 又找了很久,大多是加载flash控件然后通过flash再取,不太喜欢这么做. 如今这H5的时代感觉这个小功能应该不是问题,又想了想,之前做过js读取本地图片在web上做预览,估计读个视频应

name值与id值在Js获取元素时的区别

1.适用范围 除base.head.html.script.meta.title标签外,id都可以用:name只适用于select.form.frame.iframe.img.a.input等中. HTML元素Input type='radio'分组,同一时间只能选中一个radio,这个分组就是根据相同的Name属性来实现的. 2.获取方式 取得id:document.getElementById("id"); 取得name:document.getElementsByName(&qu

JS获取宽度高度大集合

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

jquery或js 获取url参数

<script type="text/javascript"> function getUrlParam(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r!=nu

Jquery、JS获取URL参数的方法

本篇文章主要是对javascript/jquery获取地址栏url参数的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下 代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识 2.jquery获取url参数比较复杂,要用到正则表达式,所以学好javascript正则式多

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

可以使用$.parser.parse();这个方法进行处理: 例如: $.parser.parse(); 表示对整个页面重新渲染,渲染完就可以看到easyui原来的样式了: var targetObj = $("<input name='mydate' class='easyui-datebox'>").appendTo("#id"); $.parser.parse(targetObj); 表示重新渲染某个特定的组件.