将“值”从滑块传递给元素，作为属性的参数

Question

我正在尝试捕获一个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 中，我将这两个元素设置为变量，并添加Event Listener到, 并使用从slider中捕获的函数：valueslider

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]. 这是我如何动态捕获value从slider到的想法FGElement。

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

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

Answer 1

您不能动态更改.css文件的值您必须使用 JS 来应用内联样式document.getElementById('myElement').style.flexGrow&nbsp;=&nbsp;i;