将 Javascript 值传递给 CSS？
[英]Passing Javascript value into CSS?
问题描述
我正在尝试将我的 javascript 值（百分比）传递到当前为 30% 的 css 100% 宽度线中。 这目前创建了一个向外填充的表，从 0 开始，然后到 30%，我希望能够实现我的 Javascript 值 (c2_percent) 而不是 30% 的值。 如果有人可以提供帮助，那就太好了。 谢谢
<div class="bar-graph bar-graph-horizontal bar-graph-one">
<div class="bar-one">
<span class="rating-a1">A1</span>
<div class="bar" id="rating-a1" data-percentage=""></div>
</div>
<div class="bar-two">
<span class="rating-a2">A2</span>
<div class="bar" data-percentage="11%"></div>
</div>
<div class="bar-three">
<span class="rating-a3">A3</span>
<div class="bar" data-percentage="7%"></div>
</div>
<div class="bar-four">
<span class="rating-b1">B1</span>
<div class="bar" data-percentage="10%"></div>
</div>
<div class="bar-five">
<span class="rating-b2">B2</span>
<div class="bar" data-percentage="20%"></div>
</div>
<div class="bar-six">
<span class="rating-b3">B3</span>
<div class="bar" data-percentage="5%"></div>
</div>
<div class="bar-seven">
<span class="rating-c1">C1</span>
<div class="bar" data-percentage="9%"></div>
</div>
<div class="bar-eight">
<span class="rating-c2">C2</span>
<div class="bar" id="c2-rating" data-percentage=""></div>
</div>
<div class="bar-nine">
<span class="rating-c3">C3</span>
<div class="bar" data-percentage="5%"></div>
</div>
<div class="bar-ten">
<span class="rating-d1">D1</span>
<div class="bar" data-percentage="5%"></div>
</div>
</div>
@-webkit-keyframes show-bar-eight {
0% {
width: 0;
}
100% {
width: 30%;
}
}
<script>
for(let i = 0; i < 1; i++) {
const c2_security_values = Array.from(document.querySelectorAll('.security-value-c2'));
const c2_security_values_inner = c2_security_values.map((element) => element.innerText);
const c2_summed_values = c2_security_values_inner.reduce((accumulator, currentValue) => parseInt(accumulator) + parseInt(currentValue));
const total_security_values = Array.from(document.querySelectorAll('.individual-market-value'));
const total_security_values_inner = total_security_values.map((element) => element.innerText);
const total_summed_values = total_security_values_inner.reduce((accumulator, currentValue) => parseInt(accumulator) + parseInt(currentValue));
const c2_percent = c2_summed_values / total_summed_values
}
</script>
1 个解决方案
解决方案1
0 已采纳 2022-08-10 18:47:13
在我的脑海中，我会在脚本中计算c2_percent之后添加这一行（确保在循环之外定义你的 c2_percent，并将其设置为变量，而不是常量）。
document.getElementById('c2-rating').setAttribute("data-percentage", c2_percent * 100 + '%');
由于您没有提供有关页面的 rest、styles 等的任何其他数据。我不知道这是否可行。
你假装修改c2-rating的宽度吗？
这只会修改 data-percentage 属性的值。
修改css宽度属性，可以试试
document.getElementById('c2-rating').setAttribute("style","width:" + (c2_percent * 100) + '%');
我制作了一个片段，表明它可以工作，这一切都取决于您项目中页面的 rest。
<html> <head> <style>.bar-graph { font-family: Arial, Helvetica, sans-serif; }.bar-graph div { padding: 5px 0px; }.bar-graph div span { display: inline-block; font-weight: 600; margin: 5px 5px; float: left; }.bar-graph.bar { border: 1px solid #ccc; background-color: #eee; height: 30px; } @-webkit-keyframes show-bar-eight { 0% { width: 0; } 100% { width: 30%; } } </style> </head> <body> <div class="bar-graph bar-graph-horizontal bar-graph-one"> <div class="bar-one"> <span class="rating-a1">A1</span> <div class="bar" id="rating-a1" data-percentage=""></div> </div> <div class="bar-two"> <span class="rating-a2">A2</span> <div class="bar" data-percentage="11%"></div> </div> <div class="bar-three"> <span class="rating-a3">A3</span> <div class="bar" data-percentage="7%"></div> </div> <div class="bar-four"> <span class="rating-b1">B1</span> <div class="bar" data-percentage="10%"></div> </div> <div class="bar-five"> <span class="rating-b2">B2</span> <div class="bar" data-percentage="20%"></div> </div> <div class="bar-six"> <span class="rating-b3">B3</span> <div class="bar" data-percentage="5%"></div> </div> <div class="bar-seven"> <span class="rating-c1">C1</span> <div class="bar" data-percentage="9%"></div> </div> <div class="bar-eight"> <span class="rating-c2">C2</span> <div class="bar" id="c2-rating" data-percentage=""></div> </div> <div class="bar-nine"> <span class="rating-c3">C3</span> <div class="bar" data-percentage="5%"></div> </div> <div class="bar-ten"> <span class="rating-d1">D1</span> <div class="bar" data-percentage="5%"></div> </div> </div> <input type="range" min="0" max="100" value="0" class="slider" id="c2RatingSlider" value="43" onchange="updateC2()"> <script> updateC2(); function updateC2() { var c2_percent = document.getElementById("c2RatingSlider").value / 100; document.getElementById('c2-rating').setAttribute("data-percentage", c2_percent * 100 + '%'); document.querySelectorAll('.bar').forEach((bar) => { const percentage = bar.getAttribute('data-percentage'); bar.setAttribute("style", "width:" + percentage); }); } </script> </body> </html>
将HTML和CSS传递给Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.