Question

我创建了一个精灵，里面至少有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中为每个位置滚动一个循环，但是有没有办法在javascript中全局定义背景图像，就像我在CSS中一样？

例如，

而不是使用：

<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 sheet div中的所有锚元素吗？

像这样的东西，但实际上有效：

<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";。

使用javascript

1 个答案: