如何在JavaScript中将px转换为%(在100%内)

Question

我有一个小问题，我将非常感谢任何答案。

一般来说，在我的代码中有图片的上传，还有改变高度的输入

HTML代码:

<p>Height</p>

<input type='range' min='1' max='100' step='1' value='30' class='range' />

这里是JS代码的工作时，图像刚刚上传:

const image = document.querySelector('.image')
range.value = image.height

JS修改高度代码:

const range = document.querySelector('.range')
range.addEventListener('mousemove', () => {
let x = range.value
let color = 'linear-gradient(90deg, rgb(0,0,0)' + x + '%, rgb(159, 159, 159)' + x + '%)'
range.style.background = color
image.style.height = range.value + '%'
})

问题是当addEventListener第一次工作时，它需要range。值，这个值是图像的高度(例如，121px)，这个高度大于100，但是输入的"max"属性等于100 (max="100)，因此输入值更改为100，图像也是如此。我的意思是，图像的高度现在是100%，这是不应该的。

所以，我怎么能采取图像的高度(121px)，并将其转换为百分比，但在100%之内，所以我可以使用这个数字来设置输入的值属性的第一次?

Answer 1

您可以通过获得window.height并找到它们之间的比率来计算相对值。如果你想找到一个真正的实现，请设置一个jsfiddle，这样我就可以工作了。

Answer 2

结果max属性应该与input的宽度相同，比如if input。clientWidth为200px，然后可以这样做:输入。max = input.clientWidth。这与问题无关，但对我的目的很有用。