Question

我已将FamFamFam Silk图标设置为精灵，我想在HTML页面上显示所有图标。问题是，有1000个图标分为2个.png图像，每个图像都有自己的类。例如，第一个图标为class="silk1 ad-accept"，第二个.png图片中的最后一个图标为class="silk2 ad-zoom-in"。无论如何，尝试手动完成所有这些都是疯狂的，更不用说花费的时间和可能的错误。

我的问题是，这可以通过jQuery自动完成吗？基本上，我需要一个脚本，它将采用每个CSS sprite类，并将其应用于像li这样的元素。如果它也会在它使用的类中应用标题会非常有用，所以我知道哪个图标是哪个。

Answer 1

您可以使用jQuery的addClass方法将类添加到您想要的任何元素集。

$(function(){
    $(#ads li).addClass('silk1 ad-accept');
});

但是，您是否真的在整个网站中使用了所有1000个图标？如果你所有的使用都是少数几个图标，这似乎是一个很大的开销。理论上，精灵表现更好，因为请求较少，但对8kb图标的5次请求比对800k精灵的1次请求要快得多。你可能想要考虑的事情......

Answer 2

这是你追求的那种吗？

for (var i = 0; i < document.styleSheets.length; i++) {
    var styleSheet = document.styleSheets[i];
    for (var j = 0; j < styleSheet.cssRules.length; j++) {
        var rule = styleSheet.cssRules[j];
        if (/^\.silk\d+\./.test(rule.selectorText)) {
            var classNameParts = /\.(silk\d+)\.(.*)$/.exec(rule.selectorText);
            var element = document.createElement('DIV');
            element.className = classNameParts[1] + ' ' + classNameParts[2];
            element.appendChild(document.createTextNode(element.className));
            document.body.appendChild(element);
        }
    }
}

实施例： http://jsfiddle.net/ddAcY/

在页面中包含所有CSS sprite类

2 个答案: