jquery获取高度时无法获取小数的问题

最新推荐文章于 2021-05-12 20:21:03 发布
最新推荐文章于 2021-05-12 20:21:03 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： jQuery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nayi_224/article/details/96379071
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../../js/jquery/jquery1.2.6.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="ddd" style="height:50.5px;"></div>
	</body>
	<script type="text/javascript">
		alert(jQuery("#ddd").height());
	</script>
</html>

会弹出51。查看源码会发现，height方法实际调用的是dom对象的offsetHeight属性，而这个属性会自动四舍五入。

解决方法

使用fn.css方法即可。
jQuery("#ddd").css("height")
fn的css方法实际取的是dom对象的style中的height，与下面的代码是等效的。
jQuery("#ddd")[0].style.height
这会导致结果会带有px（输出50.5px），不过这不是什么问题。

升级版本

高版本的jquery已经修复了这个问题，至少从3.2.1开始是没问题的（比它低的手里没有，就没做测试）。
官方文档：https://api.jquery.com/height/

The difference between .css( “height” ) and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .height() method is recommended when an element’s height needs to be used in a mathematical calculation.

简单翻译一下就是，.css( “height” )和.height()返回的值除了css会带有px以外，是一样的。

查看3.4.1的源码，会发现jQuery.css方法获取高度时会使用curCSS( elem, name, styles );，而这个方法中就是使用dom对象的style属性获取的。

nayi_224
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5中的行高元素,详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理
weixin_34625578的博客
06-07 831
关于元素的一些属性在前端的日常开发中，我们经常无可避免的需要获取或者监听一些页面的属性，那么我们需要经常了解一些属性代表的含义才能更好地使用这些属性。特别是一下这些：尺寸相关：offsetHeight、clientHeight、scrollHeight；偏移相关：offsetTop、clientTop、scrollTop、pageYOffset、scrollY；获取相对视口位置：Element.g...
JS中获取dom元素高度相关方法
llllllhy_的博客
04-21 2550
元素的实际距离左边界的距离：document.getElementById(“div”).offsetLeft。元素的实际距离上边界的距离：document.getElementById(“div”).offsetTop。元素的实际宽度：document.getElementById(“div”).offsetWidth。网页可视区域高： document.body.offsetHeight (包括边距的高)网页可视区域宽： document.body.offsetWidth (包括边距的宽)
Jquery选择器中不能包含小数点
apacheuk的博客
07-25 669
以前还真不知道，虽然比较简单的问题，但还是备注一下 有个id名字叫entityprocesses.number，结果用jquery $("entityprocesses.number").val()死活拿不到值。   换成$("number").val()就太平了。  T_T...
js输出数据精确到小数点后n位代码
10-22
要保留小数点后N位的问题，经过一番思索，终于解决了，这篇文章主要介绍了js输出数据精确到小数点后n位代码，感兴趣的朋友可以参考一下
jquery或者js获取到元素宽高精确到小数
weixin_30375247的博客
05-23 444
首先我们应该知道用jQuery的width()方法获取元素的宽高及样式属性数值时，如果元素的属性是浮点数，会自动四舍五入成整数。 而如果我们就是想获取实际的带小数的属性数值时该用什么方法。 在使用获取到的宽度时，为了保证与原来元素的宽度一致，我在工作中处理时有两种解决方案： 第一种js原生方法getBoundingClientRect() $(obj)[0].getBoundingClie...
jQuery获取与设置iframe高度的方法
10-21
主要介绍了jQuery获取与设置iframe高度的方法,涉及jQuery针对iframe元素的获取与设置相关操作技巧,非常简单实用,需要的朋友可以参考下
jQuery 获取屏幕高度、宽度的简单实现案例
10-22
下面小编就为大家带来一篇jQuery 获取屏幕高度、宽度的简单实现案例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决Jquery下拉框数据动态获取的问题
10-18
总结来说，通过使用jQuery的AJAX功能，我们可以实现下拉框数据的动态获取和填充，从而提高用户体验，特别是当数据量较大时，避免一次性加载所有选项导致页面加载缓慢。同时，这种方法也允许我们在用户交互时按需加载...
jQuery实现获取隐藏div高度的方法示例
10-20
主要介绍了jQuery实现获取隐藏div高度的方法,结合实例形式较为详细的分析了jQuery针对页面元素属性操作的相关技巧,需要的朋友可以参考下
jquery获取文档高度和窗口高度汇总
01-21
jquery获取窗口高度和窗口高度，$(document).height()、$(window).height() $(document).height()：整个网页的文档高度 $(window).height()：浏览器可视窗口的高度 $(window).scrollTop()：浏览器可视窗口顶端...
outerHeight()与height()的区别
dream0129的博客
04-21 906
1. .height() 获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值（带一个参数）。 注意： 1）.css('height')和.height()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。 2）.height()总是返回内容宽度,不管CSS box-sizi
jquery-outerHeight(true)的值有误问题解决办法（chrome浏览器）
Jasmines1993的个人收藏
04-17 1842
问题描述：    我想获取一个容器元素的高度（包含margin+padding+height+border），容器中包含图片，当我在chrome浏览器中调试移动到容器元素上的时候，我通过Jquery中 $('element').outerHeight(true) 所获取到的值并不是我想要的值，而是比我想要获取到的值更小。 这个容器元素的样式中包含容器本身的宽度width,position:rela...
移动端如何准确获取元素真实的宽高度,精确到小数点后两位
weixin_42369612的博客
05-12 1201
移动端如何准确获取元素真实的宽高度,精确到小数点后两位 获取元素的高度方法: 元素有个方法 offsetHeight 可以来获取元素高度 缺陷 使用offsetHeight会有一个问题,就是offsetHeight的高度会被四舍五入成一个整数,也就是说会丢失元素的高度精度 元素的实际高度为18.77px 而offsetHeight给出的高度为19px 如果在面对一些业务场景中需要不丢失精度的获取元素的高度,那么用offsetHeight来获取元素高度就不可行了 解决方案 使用 getComputedSt
jQuery中height()不能精确计算的问题
weixin_34250709的博客
06-25 914
jQuery中关于高度的计算有三个方法：outerHeight()、innerHeight()、height() outerHeight()：获取元素集合中第一个元素的当前计算高度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。在.outerHeight()计算中总是包含padding-to...
关于 jquery和js获取宽度时只能取整数，取不到小数点
HELLO WORLD
06-27 3497
见上图，该图为全屏导航截图。每个栏目名称后面都有一根白线，切白线一直到达浏览视口最右侧。 如何实现？ 我想到一个方法，见下代码： &amp;lt;div class=&quot;mainnav&quot;&amp;gt; &amp;lt;ul class=&quot;ul&quot;&amp;gt; &amp;lt;li id=&quot;mnav1&quot;&amp;gt;
JS——offset
weixin_30724853的博客
11-29 90
1、offsetWidth、offsetHeight返回盒子宽度和高度，包括padding与border，不包括margin 2、offsetLeft、offsetTop返回盒子距离定位盒子的x轴方向和y轴方向距离，如果没有定位盒子，则返回相对于body的距离 3、offsetParent返回距离定位盒子标签元素，如果没有定位盒子，则返回body标签元素 4、offsetLeft与style...
关于元素的offsetHeight、line-htight
bafudanbi37558的博客
06-03 163
最近在做一个自适应高度的加载时的瀑布效果，使用加载完毕后为其一个A容器设置style的高度的方式完成（原高度为0且超出部分裁剪），使用offsetHeight获取其子元素高度（所有子元素高度均相等），完成后，A容器底部总是比预期长了一点。 查了一下资料，发现offsetHeight得到的是元素的整数高度，而我的子元素高度为浮点数且小数第一位大于4，所以我就去看了看子元素各自的高度，发现...
js获取精确宽度/高度(带小数位像素)
热门推荐
张营的技术博客
11-09 1万+
问题：用jquery获取div等块级元素的宽高时不能精确获取，只能得到整数部分像素，不能获取小数位px。请看下面事故：<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"
jquery 获取屏幕的高度
最新发布
05-24
可以使用jQuery中的`$(window).height()`来获取屏幕的高度，代码如下： ```javascript var screenHeight = $(window).height(); console.log(screenHeight); // 屏幕高度 ``` 这将返回一个整数，表示浏览器窗口的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值