我如何找到CSS單位這個數字

有一個輸入類型文本我如何找到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,

我想將此數字轉換爲像px/%/rem/vh這樣的CSS單位。這樣我可以把動態的CSS。怎麼做？

來源

2017-06-12 Matarishvan

雖然我還找不到相關的文檔，但我很確定'getBoundingClientRect'的返回值都是以像素爲單位的。 – evolutionxbox

我猜你正在調用的實際功能是Element.getClientRects（）。在這種情況下，返回的值是像素值。閱讀https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects – Flyer53

1034不能是像素。像素中的實際寬度大約爲35px – Matarishvan

嘗試訪問您輸入的左側位置並減去插入符的左側位置。這應該給你輸入文本的大致寬度，如果這就是你正在尋找的。您需要添加一個ID或爲您的文本輸入創建一個選擇器。

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

來源

2017-06-19 17:51:57 N3SS4H

這些值是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

來源

2017-06-20 04:49:38 bhv

所以，如果我理解正確的問題，你有位置值，光標在輸入的內部，並且希望將其轉換成不同類型的CSS單位，大概是這樣你就可以做東西到輸入或相關的東西

首先要了解的是，ClientRect位置是相對於視口。正如vhutchinson所指出的那樣，如果你想要將文本的寬度與getBoundingClientRects定義的輸入的「左」值進行比較，這是一個好的開始，但如果你不僅僅影響左側，還關心頂級，你需要考慮滾動。如果您的窗口/頁面是唯一的滾動容器，則只需在頂部添加window.scrollY，然後在左側添加window.scrollX即可完成此操作，以瞭解您相對於窗口的偏移量。

所有這些單位默認爲像素...如果你想轉換到REM這是非常簡單的，1個雷姆=根元素的字體大小，所以要轉換成REM，你可以這樣做

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

做VW類似於使用在Get the browser viewport dimensions with JavaScript答案跨瀏覽器窗口的尺寸，你最終的東西，看起來像

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

百分比是棘手的，因爲你需要計算它基於元素的父你申請的CSS值但總體思路遵循相同的原則。

來源

2017-06-22 23:53:58 kball

我如何找到CSS單位這個數字

回答

相關問題