如何动态应用多浏览器兼容的CSS WebKit动画实现五星评分的部分星星着色

我来帮你搞定这个五星评分的部分着色难题！你之前尝试的几种方法都卡在了动态样式的兼容性和属性生效问题上，这里有个更简洁且兼容多浏览器的实现思路，同时帮你分析下之前的问题出在哪。

第一步：调整HTML结构 #

给星星容器加一个统一的类，方便后续CSS批量控制：

<div class="rating-stars" style="font-size:14px;">
 <i class="ion-ios-star" id="Rating_{{prod.prodID}}_1"></i>
 <i class="ion-ios-star" id="Rating_{{prod.prodID}}_2"></i>
 <i class="ion-ios-star" id="Rating_{{prod.prodID}}_3"></i>
 <i class="ion-ios-star" id="Rating_{{prod.prodID}}_4"></i>
 <i class="ion-ios-star" id="Rating_{{prod.prodID}}_5"></i>
 {{prod.Rating}} out of {{prod.RatingCount}} reviews
</div>

第二步：编写兼容多浏览器的CSS #

用CSS变量来动态传递部分着色的百分比，避免直接操作复杂的行内样式：

/* 基础未着色星星样式 */
.rating-stars .ion-ios-star {
  color: lightgray;
  /* 确保字体图标能正确应用背景裁剪 */
  display: inline-block;
}

/* 完全着色的星星 */
.rating-stars .ion-ios-star.filled {
  background: linear-gradient(to bottom, #e72c83 30%, #a742c6 70%);
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* 兜底兼容旧浏览器 */
}

/* 部分着色的星星，通过CSS变量控制渐变位置 */
.rating-stars .ion-ios-star.partial {
  --fill-percent: 0%;
  background: linear-gradient(to right, #e72c83 var(--fill-percent), lightgray var(--fill-percent));
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* 兜底兼容旧浏览器 */
}

第三步：编写JavaScript逻辑 #

计算完全填充和部分填充的星星，动态添加类并设置CSS变量：

function setProductRating(prodID, rating) {
  const totalStars = 5;
  // 拆分完全填充的星星数和部分填充的百分比
  const fullStarCount = Math.floor(rating);
  const partialFillPercent = Math.round((rating - fullStarCount) * 100); // 四舍五入避免小数问题

  // 遍历每一颗星星设置样式
  for (let i = 1; i <= totalStars; i++) {
    const starElement = document.getElementById(`Rating_${prodID}_${i}`);
    // 先清空之前的类，避免重复设置
    starElement.classList.remove('filled', 'partial');

    if (i <= fullStarCount) {
      // 前N颗星星完全着色
      starElement.classList.add('filled');
    } else if (i === fullStarCount + 1 && partialFillPercent > 0) {
      // 第N+1颗星星部分着色，设置CSS变量
      starElement.style.setProperty('--fill-percent', `${partialFillPercent}%`);
      starElement.classList.add('partial');
    }
    // 剩下的星星保持默认未着色状态
  }
}

你之前方法的问题分析 #

我帮你捋清楚之前踩的几个坑：

• 方法A：属性名写错了！你写的star.style['webkit-background-clip']少了开头的-，正确应该是star.style['-webkit-background-clip']，所以这个属性根本没生效。另外直接写-webkit-linear-gradient会被现代浏览器忽略，兼容性自然差。
• 方法B：拼写错误！你把star写成了start，导致start.classList.add('ratingStarB')根本没执行，类没加上，自然裁剪属性缺失，星星就看不见了。
• 方法C：多次设置star.style.background会被最后一次覆盖，因为行内样式只能保留一个background值。正确的做法是把前缀版本和标准版本写在同一个background属性里（用逗号分隔），但这种写法太繁琐，不如CSS变量简洁。

额外注意事项 #

• 确保ion-ios-star字体图标能正常渲染，如果出现渐变不生效的情况，给星星加上display: inline-block（已经写在上面的CSS里了）。
• 测试主流浏览器（Chrome、Firefox、Safari），CSS变量在现代浏览器都支持，要是需要兼容极旧浏览器，可以改用动态生成<style>标签的方式，但现在大部分场景CSS变量足够用。

内容的提问来源于stack exchange，提问作者rolinger