如何实现伪动态 css

How can I implement pseudo-dynamic css?

本文关键字：动态 css 实现 何实现      更新时间：2023-09-26

我在管理页面上的自定义彩色元素时遇到问题。

例如，我们在页面上有 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 更改

虽然我建议使用 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文件，通过配置表单或其他方式管理颜色更容易。

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

相关文章：