Wie CSS-Einheit für diese Nummer finden

Question

Ich habe einen Eingabetyp Text

<input type="text"> 

Grundsätzlich ich Javascript bin mit ClientRect caret Details zu erhalten. ClientRect sieht aus wie dieses

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

Diese auf everytext Eingang erzeugt wird.

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

Ich möchte diese Zahl auf CSS-Einheiten wie px/%/rem/vh konvertieren. Damit ich dynamische CSS setzen kann. Wie es geht?

Answer 1

Versuchen Sie, auf die linke Position Ihrer Eingabe zuzugreifen und ziehen Sie die linke Position Ihrer Einfügemarke ab. Dies sollte Ihnen eine ungefähre Breite des Textes in der Eingabe geben, wenn Sie das suchen. Sie müssen eine ID hinzufügen oder einen Selektor für Ihre Texteingabe erstellen.

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

Answer 2

Diese Werte sind px standardmäßig .. so einfach Suffix als px auf diesen Wert hinzufügen, und verwenden.

<input type="text"> 

diesen Wert

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); 

---

hier andere Eigenschaften als width und height sind relative to the view port zu erhalten (oben, unten, links, rechts),

also, wenn diese Werte scrollt Änderungen .. , um die perfekten Werte zu erhalten, selbst wenn scroll add diese Werte mit window.scrollX , window.scrollY oder window.pageXOffset , window.pageYOffset

Answer 3

So verwenden, wenn ich die Frage richtig zu verstehen, müssen Sie Positionswert für die Cursor innerhalb der Eingabe und Sie wollen es in verschiedene Arten von CSS-Einheiten konvertieren, vermutlich, so dass Sie tun können, etwas zur Eingabe oder verwandten Dingen

Das erste, was zu verstehen ist, dass ClientRect-Positionen relativ zum Ansichtsfenster sind. Wie Vchutchinson darauf hingewiesen hat, müssen Sie die Breite von Text mit dem "linken" Wert der Eingabe vergleichen, wie er von getBoundingClientRects definiert wurde. Das ist ein guter Anfang, aber wenn Sie nicht nur links beeinflussen, sondern sich auch um Top kümmern, müssen Sie das Scrollen berücksichtigen. Wenn Ihr Fenster/Seite der einzige Scroll-Container ist, sollten Sie dies einfach tun, indem Sie window.scrollY nach oben und window.scrollX nach links hinzufügen, um Ihren Versatz relativ zum Fenster zu verstehen.

Alle diese Einheiten sind standardmäßig Pixel ...Wenn Sie konvertieren möchten, es ist ziemlich einfach zu rem, 1 rem = die font-size Ihres Root-Element, so zu konvertieren, um rem Sie so etwas wie

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

Doing VW ist ähnlich mit der Antwort in Get the browser viewport dimensions with JavaScript tun können Cross-Browser-Fenster Dimensionen, dann würden Sie mit etwas beenden, die

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

Prozent sind kniffliger wie

aussieht, weil Sie es auf dem übergeordneten des Elements auf Basis zu berechnen brauchen würden, um Sie zum CSS-Wert bewerben , aber die allgemeine Idee folgt demselben Prinzip.