JS/CSS: свяжите функцию ввода числа с функцией элемента с изменяемым размером ⇐ CSS

[Anonymous]

Я работаю над небольшим приложением для типографики и наткнулся на блокировщик. Я извлек код ядра в ручку, т. е. в пользовательском интерфейсе есть другие входы, кнопки. Следовательно, почему я использую querySelectorAll('input[type="number"]') и т. д.

Цель состоит в том, чтобы перетаскиваемый элемент обновлял размер текста (длину строки) и привязывался к вводу числа путем обновления свойства CSS: --_typecsset-text-measure

У меня есть наблюдатель изменения размера, записывающий перетаскиваемый элемент на консоль, но на данный момент я уже не в курсе!

Я настроил перо: https://codepen.io/timpish/full/abMdBay

// изменение размера шрифта и отведения const NumberInputs = document.querySelectorAll('input[type="number"]'); //константная мера = document.getElementById("мера"); //const labels = document.querySelectorAll('label'); функция updateProp(событие) { const uom = this.dataset.uom || ""; document.documentElement.style.setProperty( `--_${this.name}`, это.значение + ед. ); //const label = labels[Array.from(rangeSliders).indexOf(this)]; //label.textContent = parseFloat(this.value).toFixed(3); } NumberInputs.forEach((вход, индекс) => { input.addEventListener("input", updateProp); //labels[index].textContent = parseFloat(input.value).toFixed(3); }); // измеряем (длину строки) пусть ObserveMeasure = новый ResizeObserver (функция (мутации) { document.documentElement.style.setProperty( "--_typecsset-text-measure", мутации[0].contentRect.width + "px" ); }); let drag = document.querySelector(".resizable"); ObserveMeasure.observe(drag); /* глобальные переменные */ *, *::до, *::после { размер коробки: граница-коробка; } *:not(main p) { маржа: 0; заполнение: 0; } :где(html) { --_typecsset-body-fontSize: var(--typecsset-base-fontSize, 1rem); --_typecsset-body-lineHeight: var(--typecsset-base-lineHeight, 1.5); --_typecsset-color-dark: var(--typecsset-color-dark, hsl(0, 0%, 0%)); --_typecsset-color-light: var(--typecsset-color-light, hsl(0, 0%, 100%)); --_typecsset-color-neutral: var(--typecsset-color-neutral, hsl(0, 0%, 50%)); --_typecsset-recursive-caslAxis: var( --typecsset-recursive-caslAxis, «КАСЛ» 0 ); --_typecsset-recursive-crsvAxis: var( --typecsset-recursive-crsvAxis, «КРСВ» 0,5 ); --_typecsset-recursive-monoAxis: var( --typecsset-recursive-monoAxis, «МОНО» 0 ); --_typecsset-recursive-slntAxis: var( --typecsset-recursive-slntAxis, "СНТ" 0 ); --_typecsset-recursive-wghtAxis: var( --typecsset-recursive-wghtAxis, "вот" 400 ); --_typecsset-text-measure: var(--typecsset-text-measure, 80rem); настройки-вариации шрифта: var(--_typecsset-recursive-monoAxis), var(--_typecsset-recursive-caslAxis), var(--_typecsset-recursive-wghtAxis), var(--_typecsset-recursive-wghtAxis), var(--_typecsset-recursive-crsvAxis), var(--_typecsset-recursive-slntAxis); семейство шрифтов: Рекурсивный, без засечек; высота строки: 1; } тело { цвет фона: var (--_typecsset-color-light); цвет: var (--_typecsset-color-dark); } /* темный режим */ @media (предпочитает цветовую схему: темную) { тело { цвет фона: var (--_typecsset-color-dark); цвет: var (--_typecsset-color-light); } } основной { семейство шрифтов: «Алегрея», с засечками; размер шрифта: var (--_typecsset-body-fontSize); высота строки: var (--_typecsset-body-lineHeight); } /* элементы */ ч2, ч4, вход, основной { отступ слева: 0,2rem !важно; отступ справа: 0,2rem !важно; } вход { отступ справа: 0 !важно; } ч1, ч2, ч3, ч4 { высота строки: 0,9 !важно; } ч2, ч4 { цвет: var(--_typecsset-color-neutral) !important; размер шрифта: 15 пикселей; } ч2 { /* единица «cap» для заглавных букв. Джанк Сафари. */ межбуквенный интервал: 0.06cap; преобразование текста: верхний регистр; --_typecsset-recursive-wghtAxis: var( --typecsset-recursive-wghtAxis, "Вт" 600 ); настройки-вариации шрифта: var (--_typecsset-recursive-wghtAxis); } /* подзаголовок под входами/кнопками */ ч4 { вес шрифта: нормальный; преобразование текста: нет; } /* тащить */ ч4 + ч4 { цвет: currentColor !важно; отступ-дно: 0,1рем; } вход { цвет фона: наследовать; цвет: наследовать; шрифт: наследовать; размер шрифта: 0,95рем; border-top: 1,618 пикселей сплошная переменная (--_typecsset-color-neutral); border-bottom: 1,618 пикселей сплошная переменная (--_typecsset-color-neutral); правая граница: нет; левая граница: нет; граница: 1,618 пикселей сплошная var (--_typecsset-color-neutral); радиус границы: 3 пикселя; /* box-shadow: inset 0.25rem 0.25rem 0 var(--_typecsset-color-neutral) */ дополнение: ; } /* цитата внутри основного */ цитата { висит-пунктуация: первый последний; &::до { содержимое: "\201C"; } &::после { содержимое: "\201D"; } &::до, &::после { цвет: var (--_typecsset-color-neutral); } } /* примитивы макета */ .центр { размер коробки: поле содержимого; Маржа-встроенная: авто; максимальный встроенный размер: var (--_typecsset-text-measure); дополнение-inline-start: 1rem; дополнение-inline-end: 1rem; } .кластер { дисплей: гибкий; flex-wrap: обертка; разрыв: var (--space, 0,618рем); /* используем масштаб */ оправдание-содержание: пространство между; выровнять-элементы: по центру; } .icon-линейка { фоновое изображение: url("icons.svg#icon-ruler-view"); фоновое происхождение: поле содержимого; фоновая позиция: вверху слева; фоновый повтор: повтор-x; размер фона: 3,1 рем 1 рем; } .ритм { дисплей: гибкий; гибкое направление: столбец; оправдание-содержание: гибкий старт; } [класс^="ритм"] > * { маржинальный блок: 0; } .rhythm-xs > * + * { маржа-блок-старт: 0,2рем; } .ритм-ы > * + * { маржа-блок-старт: 0,309рем; } .rhythm-m > * + * { маржа-блок-старт: 0,618рем; } .rhythm-l > * + * { маржа-блок-старт: 1,236рем; } .rhythm-xl > * + * { маржа-блок-старт: 1,857рем; } /* утилиты */ .typeface-alegreya { семейство шрифтов: «Алегрея», с засечками; } .color\:нейтральный { цвет: var (--_typecsset-color-neutral); } .cursor\:перекрестие { курсор: перекрестие; } .измеряемый размер { изменение размера: встроенное; переполнение: прокрутка; } .ширина\:100\% { ширина: 100% !важно; } /*отладчик */ * { контур: васильковый, пунктирный, 0,5 пикселя; Измерить рем перетащите ↘  Плотность текстуры на написанной или набранной ¦эт странице называется ¦s цвет.¦ Это не имеет ничего общего с красными или зелеными чернилами; это относится только к темноте или черноте букв в массе. Как только требования разборчивости и логического порядка удовлетворены, равномерность цвета становится обычной целью типографа. А цвет зависит от четырех вещей: дизайна шрифта, расстояния между буквами, расстояния между словами и расстояния между строками. Ни один из них не является независимым от других.
Любая длина от 45 до 75 широко считается удовлетворительной длиной строки для страницы с одной колонкой, заданной шрифтом с засечками и размером текста. Строка из 66 символов (считая буквы и пробелы) считается идеальной. Для работы с несколькими столбцами лучше всего использовать от 40 до 50 символов.