javascript - 用css中的变量控制精灵图像坐标

Question

我想使用变量控制 css 中的精灵图像坐标。

background: url('sprite.png') no-repeat -123px -321px; width: 23px; height: 22px;

我想要的是能够使用变量使用上面的代码行，

background: url('sprite.png') no-repeat -X -Y; width: 23px; height: 22px;

这样我就可以即时设置我的 X 和 Y。

PS：我正在尝试根据我的平均星级评分来设置精灵的点亮星星的长度，这是一个浮点数（如 3.1）。我不想使用 LESS 或 Sass。

Answer 1

使用 Javascript：

var yourelement = document.getElementById('yourelementsid');

yourelement.style.backgroundPosition = x + 'px ' + y + 'px';

Answer 2

您还可以使用具有内联样式的服务器端脚本返回值：

<div style="background-position: <?php echo x . 'px ' . y . 'px'; ?>;"></div>