我有一个 Bootstrap 4 网站，上面有以下 hmtl 代码
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto>
<h2>Example heading text</h2>
<h6>Example subheading text</h6>
</div>
</div
</div>
默认情况下 <h2> 的颜色-元素是黑色的。现在我在后台计算一些依赖于此文本的东西。假设计算结果是 75% 我想更改 <h2> 中文本的颜色- 元素为红色但不是整个文本 - 只有文本宽度达到整个文本宽度的 75%。 (看我添加的示例图片)
文本下方应该有一个进度条(所以在我的示例代码中，<h2> - 和 <h6> - 元素之间。这个进度条应该用与上面的文本相同的红色填充，并且应该用该颜色填充到与文本相同的宽度(在示例中为 75%)。
我如何使用 Javascript 或 jQuery 做到这一点？或者是否有我可以使用的纯 css 解决方案？但请记住，我的网站上有多个这样的部分我必须这样做，并且每个条目都可能有其他百分比值。这两个元素应该同时着色为 slider 或线性效果。
这是一张示例图片，希望能更好地理解我想要什么。如果需要更多详细信息，请告诉我。
最佳答案
想法是您可以从进度条查询当前值并将该值作为两个色标的色标值传递。有点模仿进度条。
我根据您提供的代码在下面添加了一些示例代码。
我在这个例子中没有使用进度条。
相反，我使用了一个 for 循环和一个警报来说明这个想法是如何工作的。 循环带来迭代，警报允许您停止并查看颜色进展。
for 循环的迭代可以表示正在使用进度条跟踪的进程，该进度条在任何给定时间都有一个值。通过将该值插入到渐变中，您的彩色文本将被更新。
同样，这只是一个想法。
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.colorIt {
display: inline-block;
/*background-image: linear-gradient(to right, green 10%, black 10%);*/
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
h2 {
font-size: 30px;
font-weight: bold;
}
</style>
<script>
// create script to inc and dec the color-stops on the gradient
$(document).ready(function () {
adjustColorStops();
});
function adjustColorStops() //x=color-stop start color, y=color-stop end color values
{
// create a script to set the color-stops of the gradient
// this is for the purpose of covering the left (green) color across to the right, eliminating the black color eventially
var i;
for (i = 0; i < 110; i++)
{
alert(i); // this is to slow things down so that you can see the increments of the color
$(".colorIt").css("background-image", "linear-gradient(to right, green " + i + "%, black " + i + "%)");
i += 9;
}
return;
}
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<h2 class="colorIt">Example heading text</h2>
<h6>Heading text is filled with a gradient.</h6>
<!--<div class="progressBarDiv"></div>-->
</div>
</div>
</div>
</body>
</html>
关于javascript - 结合进度条将文本颜色更改为特定宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49968045/