javascript - 将 "value"从 slider 传递到元素，作为属性的参数

Question

我正在 try catch HTML slider value，它应该设置属性的参数(在 >CSS 类)。

所以，我有一个 slider 和一个 div 元素 - 我想将值传递给:

<input type="range" min="1" max="11" value="6" class="slider" id="slider">

<div id="container">
     <div id="fg2">text</div>
</div>

在 JS 中，我已将这两个元素设置为变量，并向 slider 添加了事件监听器，并具有捕获值的函数从 slider :

const slider = document.getElementById("slider")
const FGElement = document.getElementById("fg2");

slider.addEventListener("input", function(){
    changeSize();
});

function changeSize() {
    let i = slider.valueAsNumber;
    console.log(i);
}

现在，我想向 FGElement 添加一个类，在其中放置 flex-grow: [i]。这是我关于如何从 slider 动态捕获 value 到 FGElement 的想法。

这是正确的方法吗？如果是的话 - 如何在 JS 中设置 CSS class attribute 的参数？

如果没有，正确的方法是什么......

Answer 1

您无法动态更改 .css 文件的值

你必须使用JS来应用内联样式

document.getElementById('myElement').style.flexGrow = i;