如何找到这个号码的css单位

Question

我有一个输入类型的文本

<input type="text">

基本上我使用javascript ClientRect来获取插入细节.ClientRect看起来像这样

[object ClientRect]
  {
     [functions]: ,
     __proto__: { },
     bottom: 540.7999877929687,
     constructor: { },
     height: 24,
     left: 1034.5399169921875,
     right: 1034.5399169921875,
     top: 516.7999877929687,
     width: 0
  }

这是在每个文本输入上生成的.

left: 1034.5399169921875,
left: 1065.5399169921875,
left: 1078.5399169921875,

我想将此数字转换为CSS单位px/%/rem/vh.这样我就可以把动态css.怎么做？

Answer 1

尝试访问输入的左侧位置并减去插入符号的左侧位置.这应该为您提供输入中文本的近似宽度,如果这是您要查找的内容.您需要为文本输入添加id或创建选择器.

var inputElementRect = document.getElementById('YOURINPUTID').getBoundingClientRect()
var width = inputElementRect.left - caretRect.left