Question

我试图创建一个正在开发的新页面的进度条（您可以根据自己的喜好来绘制喜爱的歌曲）

给出宽度的值为

+Math.floor(finishSize*100/totalSize)+

但是我无法将其放入CSS。或至少将其放入style =“”。我一直在寻找教程，但对我没有任何帮助。

这是我的JSFiddle

Answer 1

类似这样的东西：

// Get your progress bar element
let progressBar = document.getElementsByClassName('progressbar');
// update the style width
progressBar[0].style.width = Math.floor(finishSize*100/totalSize)+'%';

在您的小提琴中， Math.floor（finishSize * 100 / totalSize）+'％'的计算结果为零，因此该条未显示，这是另一个问题，但是您可以添加这可以在showImage函数的末尾看到，它将更新进度条：

// Get your progress bar element
let progressBar = document.getElementsByClassName('progressbar');
// update the style width
progressBar[0].style.width = Math.floor(finishSize * 100 / totalSize) + '%';
progressBar[0].style.width = '33%';

Answer 2

let progressbar = document.querySelector('.progressbar');
progressBar.style.width = Math.floor(finishSize*100/totalSize)+'%';

首先，在可以使用element.style.width = SIZE之后，先选择要更改的内容（在本例中为类进度条）选择一个元素，如果您确定只会获得第一个元素，或者可以使用querySelector来获得元素数组，则可以使用getElementByClassName

Here a explain about js selector element

querySelector document

getElementByClassName document

像进度条一样从JS到CSS获得价值

2 个答案: