-3

我无法管理页面上的自定义颜色元素。

例如，我们在页面上有 100 个导航方块，每个方块都有自己的颜色，除了为每种颜色创建 css 类之外，想不出任何办法。这将产生大量的 CSS 代码。

需要一些帮助，谢谢

*添加了javascript和jquery标签作为解决这个问题的可能方法之一

更新： 感谢大家的回复，感觉我需要详细说明。我的搜索页面上有平方类别导航，颜色可以来自服务器端，也可以存储在客户端的 js 中。我从服务器获取类别列表（假设我也为每个类别获取颜色）然后我构建所有正方形（默认情况下它们是白色的，但是在 :hover 上它们会改变颜色）所以我会选择这样的解决方案：

<ul id="squares">
<li class="greencolor"></li>
<li class="redcolor"></li>
<li class="bluecolor"></li>
</ul>

用CSS：

#squares li.redcolor:hover{
 background:red;
}
#squares li.greencolor:hover{
 background:green;
}
#squares li.bluecolor:hover{
 background:blue;
}

希望现在您可以看到我所说的为 100 个元素引用大量 CSS 代码。

是的，我知道我可以寻求这样的解决方案：

var colorsMap={'redcolor':'red','greencolor':'green'};     
$('#squares li').on('hover',function(e){

    $(this).css('background-color', colorsMap[$(this).attr('class')];

});

但这对我来说听起来不是一个优雅的解决方案，我试图找到通过 css 实现它的方法，而不是 js 的内联 css 更改

4

2 回答 2

1

虽然我推荐使用 CSS 来实现，但是还是有一个比内联样式更好的解决方案：

var selector = '#squares li'
  , css = []
  , style = document.createElement( 'style' )
  , colorsMap= {
      'redcolor': 'red',
      'greencolor': 'green',
      'bluecolor': 'blue'
    }
$( selector ).each( function() {
  css.push( selector + 
            '.' + 
            // recommand to use data-attr to store color info
            // assuming `className == 'bluecolor'`
            this.className + 
            ':hover' +
            '{' +
            'background:' +
            colorsMap[ this.className ] +
            '}'
            )
})
style.textContent = css.join('')
document.head.appendChild( style )

通过将 CSS 动态插入<head>，您仍然可以从普通 CSS 中获得好处，演示。

而且，您还可以在后端生成动态 CSS 文件，通过配置表单或其他方式更轻松地管理颜色。

于 2013-01-31T15:04:44.373 回答
0

首先，我的英语很差（但我正在努力学习）。所以我不能说我理解你很清楚。但是你说的话让我想起了选择者。我不知道是不是你想要，但我认为这不是一个坏主意。就像这些：等等。 他们的作用我就不说了。我觉得有必要学习，他们很有用。
$(":header").css("color","#FF00FF");
$("div:contains('test')").css("background","#666600");
$("div:empty").css("background","#888800");
$("div:has(span)").css("background","#008080");

于 2013-01-31T14:24:30.660 回答