javascript - 使用 javascript 压缩 CSS sprite 代码

Question

我创建了一个 Sprite ，其中至少有 50 个小图像。

目前，我正在使用此样式表使每个元素都可访问:

#L A{background-image:url('http://example.com/spritefile');text-align:right;width:95px;height:63px;background-color:#220;color:#FFF;float:left;margin:2% 1%;display:block}
#L0{background:0 0}
#L1{background:-96px 0}
#L2{background:-192px 0}
.....
#L50{background:-960px -128px}

和这个 HTML:

<div ID="L">
<a ID="L0" href="1">1</a>
<a ID="L0" href="2">2</a>
<a ID="L0" href="3">3</a>
....
<a ID="L50" href="50">50</a>
</div>

创建我的代码和 spritesheet 后，用户可以从网格中选择他们想要的任何元素，该网格几乎可以适应任何屏幕宽度。

现在我想做的是压缩代码，这样我就没有那么多的背景位置声明，但同时，让网站对所有人都可用(包括那些关闭了 javascript 的人)。

我可以轻松地在 javascript 中为每个单独的位置滚动一个循环，但是有没有办法像在 CSS 中一样在 javascript 中全局定义背景图像？

例如，

而不是使用:

<script>
for (n=1;n<50;n++){
 document.getElementById('L'+n).backgroundPosition=x+"px "+y+"px";
 document.getElementById('L'+n).backgroundImage='url("http://example.com/spritefile")';
 x=x+20;if ((n % 10)==0){x=0;y=y+20;}
}
</script>

我可以以某种方式仅调用一次backgroundImage并使其应用于 Sprite 表div中的所有 anchor 元素吗？

类似这样但实际有效的东西:

<script>
 document.allchildrenof.getElementById('L').backgroundImage='url("http://example.com/spritefile")';

for (n=1;n<50;n++){
 document.getElementById('L'+n).backgroundPosition=x+"px "+y+"px";
 x=x+20;if ((n % 10)==0){x=0;y=y+20;}
}
</script>

如果我的 JavaScript 有点生疏，我深表歉意。

Answer 1

因此，您可以通过两种不同的方式来执行此操作。

如果 CSS 将保持静态(并且您只是尝试折叠 CSS 以使其更易于修改)，请使用 SASS 。如果您需要在用户与页面交互时有时动态更改背景，请使用 Javascript。

SASS

实现 SASS 相当简单。

@for i from 1 through 50{
    #L#{$i}{
        // your styles here
        // you can use $i in calculations to dynamically generate numbers
        // For example
        background: $i * -96 0;
    }
}

Javascript

为此，它基本上是您已经编写的内容，只是您必须在要创建的元素上创建所需的所有内联样式，而不是编写 element.backgroundImage ，然后设置新文档元素的 style 属性，例如 element.style="background-image: url('');color: red";。