Question

我无法在页面上管理自定义彩色元素。

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

需要一些帮助，感谢

*添加了javascript＆amp; jquery标签是解决这个问题的可能方法之一

更新感谢回复的人，感觉我需要深入细节。我在我的搜索页面上进行了平方类别导航，颜色可以从服务器端进行，也可以存储在客户端的js中。我从服务器获取类别列表（假设我也得到每个颜色的颜色）然后我建立所有正方形（默认情况下它们是白色的，但是在：悬停它们会改变它们的颜色）所以我会选择这样的解决方案：

<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更改

Answer 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 demo中获益。

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

Answer 2

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

我该如何实现伪动态css？

2 个答案: