js動態設置padding-top遇到的坑

我想通過js動態設置元素padding-top的百分比值：以下幾種都是無法設置成功的:

// setAttribute設置padding-top並且轉換為百分比
imageBox.setAttribute('padding-top',`${(imageHeight/imageWidth)*(swiperWidth/imageBoxWidth)*100}%`);
//setAttribute設置padding-top使用percentage
imageBox.setAttribute('padding-top',`percentage(${(imageHeight/imageWidth)*(swiperWidth/imageBoxWidth)})`);
// style屬性直接設置 使用percentage
imageBox.style.paddingTop = `percentage${(imageHeight/imageWidth)*(swiperWidth/imageBoxWidth)}`;

成功實現的方式：

imageBox.style.paddingTop = `${(imageHeight/imageWidth)*(swiperWidth/imageBoxWidth)*100}%`;

percentage這個百分比用法在css中是起作用的，在js中還是設置css樣式的時候還是儘量少用，會出現設置不成功的問題，還是需要轉換成百分比。