一些奇奇怪怪的问题

125 阅读1分钟

1、使用offsetWidth或者旧版jq获取dom像素宽度,存在小数位像素直接取整现象

  • 问题描述:点击滑动框,右滑后最后一栏的数据在界面中不展示,滑落到实际位置下方(非可视位置),导致错误
  • 问题分析:滑动框总体长度设置错误,导致最后一栏由于放置不下而滑落到第二行。具体长度来自每一栏的长度*栏数,故而确定是长度出错

image.png

上面的dom,通过原生js:offsetWidth方法获取到的数据为整数: image.png

使用旧版的jq获取的宽度也是整数

  • 最终解决方案: 通过getBoundingClientRect或者新版的jq获取数据
document.getElementById("userId").getBoundingClientRect().width //320.078125
$("#userId").outerWidth(); // 320.07820000000004

最后顺便总结下jq获取宽度的规则 1635394105(2).jpg