將“值”從滑塊傳遞給元素，作為屬性的參數

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 ，並使用一個從slider捕獲value的函數：

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;