Как найти блок css для этого номера

У меня есть текст типа ввода

<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. Как это сделать?


javascript html css units-of-measurement
person Matarishvan    schedule 12.06.2017    source источник
comment
Хотя я пока не могу найти соответствующую документацию, я почти уверен, что возвращаемые значения getBoundingClientRect все в пикселях.   -  person evolutionxbox    schedule 12.06.2017
comment
Я предполагаю, что фактическая функция, которую вы вызываете, это Element.getClientRects(). В этом случае возвращаемые значения являются значениями пикселей. Прочитайте developer.mozilla.org/en-US/docs/Web /API/Элемент/getClientRects   -  person Flyer53    schedule 12.06.2017
comment
1034 не может быть пикселями. Фактическая ширина в пикселях будет около 35 пикселей.   -  person Matarishvan    schedule 12.06.2017
comment
@Matarishvan 1034 - это не ваша ширина, это left позиция вашего элемента. Это также right позиция вашего элемента, следовательно, ваш width: 0 - кажется, он всегда в пикселях. Если вы, например, укажете высоту 30pt для своего элемента, getClientRects() все равно даст вам высоту в пикселях.   -  person Nope    schedule 12.06.2017
comment
@Fran спасибо за объяснение .. Но все же, как мне найти ширину слева в пикселях, чтобы поместить ее в css?   -  person Matarishvan    schedule 13.06.2017
comment
Что вы на самом деле ищете? Положение курсора внутри текстового поля? Я считаю, что вы выиграете, если выразите свои потребности, а не свое решение! Трудно угадать значение, которое нужно вложить в правило css, когда мы понятия не имеем, что должно делать это правило css.   -  person user3220633    schedule 16.06.2017
comment
Это 1034 (например) уже в пикселях, это расстояние положения элементов относительно левого окна просмотра   -  person VilleKoo    schedule 16.06.2017
comment
возможно, это может помочь: stackoverflow. ком/вопросы/9012835/   -  person DanielaB67    schedule 17.06.2017

Ответы (3)


arrow_upward
8
arrow_downward

Попробуйте получить доступ к левой позиции вашего ввода и вычтите левую позицию вашей каретки. Это должно дать вам приблизительную ширину текста на входе, если это то, что вы ищете. Вам нужно будет добавить идентификатор или создать селектор для ввода текста.

var inputElementRect = document.getElementById('YOURINPUTID').getBoundingClientRect()
var width = inputElementRect.left - caretRect.left
person N3SS4H    schedule 19.06.2017

arrow_upward
2
arrow_downward

Эти значения по умолчанию 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 (верхний, нижний, левый, правый),

поэтому, если прокрутить эти значения, они изменятся ... чтобы получить идеальные значения, даже если прокрутить add эти значения с помощью window.scrollX , window.scrollY или можно использовать window.pageXOffset , window.pageYOffset

person bhv    schedule 20.06.2017

arrow_upward
0
arrow_downward

Итак, если я правильно понимаю вопрос, у вас есть значения позиции для курсора внутри ввода, и вы хотите преобразовать его в различные типы единиц CSS, предположительно, чтобы вы могли что-то сделать с вводом или связанными с ним вещами.

Первое, что нужно понять, это то, что позиции ClientRect относятся к области просмотра. Итак, как указал Вхатчинсон, если вам нужна ширина текста, которую вам нужно сравнить с «левым» значением ввода, как определено в getBoundingClientRects. Это хорошее начало, но если вы влияете не только на левый, но и на верхний, вам нужно учитывать прокрутку. Если ваше окно/страница является единственным контейнером прокрутки, вы сможете сделать это, просто добавив window.scrollY сверху и window.scrollX слева, чтобы понять ваше смещение относительно окна.

Все эти единицы по умолчанию являются пикселями... если вы хотите преобразовать в rem, это довольно просто, 1 rem = размер шрифта вашего корневого элемента, поэтому для преобразования в rem вы можете сделать что-то вроде

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

Выполнение VW аналогично использованию ответа в Получить размеры области просмотра браузера с помощью JavaScript для кросс-браузерных размеров окна вы получите что-то похожее на

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

Проценты сложнее, потому что вам нужно вычислить их на основе родителя элемента, к которому вы применяете значение css, но общая идея следует тому же принципу.

person kball    schedule 22.06.2017