如何找到此号码的 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

Answer 2

默认情况下，这些值是 px .. 所以只需向该值添加后缀 px 并使用它。

<input type="text">

获得那个值

let text = document.querySelector('input');
let values = text.getBoundingClientRect();

let top_value = values.top + 'px';
let bottom_value = values.bottom + 'px';
let width_value = values.width + 'px';
let height_value = values.height + 'px';


console.log('top: '+ top_value);
console.log('bottom: '+ bottom_value);
console.log('width: '+ width_value);
console.log('height: '+ height_value);

这里除了width和height之外的属性是relative to the view port(top,bottom,left,right),

所以如果滚动这个值将会改变.. 即使滚动 add 也能获得完美的值 window.scrollX , window.scrollY 或者可以使用 window.pageXOffset , window.pageYOffset

Answer 3

所以如果我理解正确的话，你有输入内部光标的位置值，你想把它转换成不同类型的 CSS 单位，大概这样你就可以对输入做一些事情或相关的东西

首先要了解的是，ClientRect 的位置是相对于视口的。因此，正如 vhutchinson 指出的那样，如果您想要文本的宽度，则需要将其与 getBoundingClientRects 定义的输入的 "left" 值进行比较。这是一个良好的开端，但如果您不仅影响左侧而且还关心顶部，则需要考虑滚动。如果你的 window/page 是唯一的滚动容器，你应该能够简单地通过在顶部添加 window.scrollY 并在左侧添加 window.scrollX 来了解你相对于 [=29= 的偏移量].

默认情况下，所有这些单位都是像素...如果您想转换为 rem 非常简单，1 rem = 根元素的字体大小，因此要转换为 rem，您可以执行以下操作

var remBase = parseInt(window.getComputedStyle(document.body).getPropertyValue('font-size'), 10);
var remValue = (myComputedPixelValue / remBase) + "rem";

使用 Get the browser viewport dimensions with JavaScript 中针对跨浏览器 window 维度的答案，做 VW 是相似的，你最终会得到看起来像

的东西

var viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var vwValue = (myComputedPixelValue / viewportWidth) + "vw";

百分比比较棘手，因为您需要根据要应用 css 值的元素的父元素来计算它，但总体思路遵循相同的原则。

如何找到此号码的 css 单位

How to find css unit for this number

html

javascript

css

units-of-measurement