Javascript 单击按钮时如何给整个星形图标上色

我在codeIgniter中做一个项目，我有一个表格，用于对产品进行评级

当我点击一个按钮（星型）时，我需要使整个按钮（星型）改变其属性

颜色变为黄色。我这样做了，但它只将边框颜色变为黄色。中间

按钮的顶部仍为白色。 谁能告诉我怎么做

<h1><div class="rating" style="width:200px;float:left;padding-left:1px">
                                    <span id="span1" onclick="document.getElementById

('rateText').innerHTML='Excellent', setColor(this.id);">   ?   </span> 
                                    <span id="span2" onclick="document.getElementById

('rateText').innerHTML='Good', setColor(this.id);">   ?   </span> 
                                    <span id="span3" onclick="document.getElementById

('rateText').innerHTML='Okay', setColor(this.id);">   ?   </span>
                                    <span id="span4" onclick="document.getElementById

('rateText').innerHTML='Unsatisfied', setColor(this.id);">   ?   </span>
                                    <span id="span5" onclick="document.getElementById

('rateText').innerHTML='Terrible', setColor(this.id);">   ?   </span>
                                    </div></h1>

<div style="float:right;padding-right:450px">
        <h3><p id="rateText"></p></h3>
</div>

?    
?    
?   
?   
?   

Javascript 单击按钮时，此代码会更改按钮颜色

<script type="text/javascript">
function setColor(btn){
    var property = document.getElementById(btn);
    property.style.color = "#FFFF00"
}
</script>

功能设置颜色（btn）{
var属性=document.getElementById（btn）；
property.style.color=“#ffffff00”
}

CSS 此代码链接按钮并在鼠标悬停时更改颜色

<style type="text/css">
    #rateText{

    text-align:right;

    }
    .rating {
    unicode-bidi: bidi-override;
    direction: rtl ;
    }

    .rating > span:hover:before,
    .rating > span:hover ~ span:before {
    content: "\2605";
    position: absolute;
    color: #FFFF00;
    }

</style>

#速率文本{
文本对齐：右对齐；
}
.评级{
unicode-bidi:bidi覆盖；
方向：rtl；
}
.额定值>范围：悬停：之前，
.额定值>span:悬停~span:之前{
内容：“\2605”；
位置：绝对位置；
颜色：#FFFF00；
}

您需要应用与“悬停选择器”相同的样式。例如，您可以将

.active

类添加到单击的星号。检查下面的css和js代码

.rating > span.active:before,
.rating > span:hover:before,
.rating > span:hover ~ span:before
{
    content: "\2605";
    position: absolute;
    color: #FFFF00;
}

function setColor(btn){
        var property = document.getElementById(btn);
        property.classList.add('active');
}

---

看起来你没有使用实心星形，所以这就是为什么只有边框会改变，因为这就是角色所拥有的一切。你能给我举个例子说明如何使用实心星形吗@epasarello当我点击一个按钮span1时，我需要所有5个按钮都是彩色的，但如果我点击了span2按钮，第5个按钮应该将颜色改为这是正常的方式，所有其他4个按钮应显示为黄色。您能告诉我如何实现这一点吗？抱歉，耽搁了。看看这个。我希望它能给你一个线索。非常感谢你。你解决了我的问题：-）：-）