我试图从API获取信息，然后编辑html样式的宽度以显示进度条，我似乎无法从API获取变量来编辑宽度，但我知道编辑宽度的功能iS right，因为当我只添加数字(px(时，它会更改宽度。这一定是我使用变量的方式
我假设我必须先做一些变量，然后才能将其用于
<!DOCTYPE html>
<html lang="en">
<head>
<title>Default page</title>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="Default page" name="description">
<meta content="width=device-width, initial-scale=1" name="viewport">
<style>
body {
background-color: powderblue;
margin: 0;
box-sizing: border-box;
padding: 0;
}
.Name,.Rankedkd,.Rankedmmr,.Rankedbar{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Name{
top:45%;
}
.Rankedkd{
top:50%%;
}
.Rankedmmr{
top:55%;
}
.Rankedbar{
top:60%;
width:500px;
height:15px;
background-color:white;
border: 30px solid #1C6EA4;
border-radius: 40px;
}
.Rankedbarin{
background-color: #1C6EA4;
height:100%;
width: 100px;
}
</style>
</head>
<body>
<div class="Name">i dont know</div>
<div class="Rankedkd">i dont know</div>
<div class="Rankedmmr">i dont know</div>
<div class="Rankedbar">
<div class="Rankedbarin"></div>
</div>
<script>
let name = document.querySelector('.Name');
let rankedkd = document.querySelector('.Rankedkd');
let rankedmmr = document.querySelector('.Rankedmmr');
fetch(' https://r6.apitab.com/search/uplay/Sir.Charles.')
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
const {kd,mmr} = data.players["179704b6-f18c-48c0-b789-56c38a9e2e8e"].ranked;
name.textContent = data.requested;
rankedkd.textContent = kd;
rankedmmr.textContent = mmr;
const WidthOfMmr = mmr / 10;
document.querySelector('.Rankedbarin').style.width = "'%spx',WidthOfMmr";
console.log('%spx',WidthOfMmr);
});
</script>
</body>
</html>
您的问题是生成css代码的方式，而不是
document.querySelector('.Rankedbarin').style.width = "'%spx',WidthOfMmr";
你应该做一些类似的事情：
document.querySelector('.Rankedbarin').style.width = `${WidthOfMmr}px`;
请参阅字符串文字以获取参考。
此外，您有一个双%登录的类，只需删除第二个%
.Rankedkd{
top:50%%;
}
您也可以通过直接以像素为单位创建宽度来解决此问题，如下所示：
const WidthOfMmr = mmr / 10 + "px";
document.querySelector('.Rankedbarin').style.width = WidthOfMmr;