如何在Django中实现随机切换背景色CSS类名的效果？

你可以通过以下三种常用方案实现需求，可根据自己的项目场景选择：

方案1：单视图传值（适合仅单个页面需要该效果的场景） #

直接在对应视图函数中生成随机类名，通过上下文传给模板调用即可：

• 视图层代码（views.py）：

import random

def 你的视图函数名(request):
    # 定义所有可选的背景类列表
    bg_classes = ['bg-success', 'bg-primary', 'bg-light', 'bg-dark']
    # 随机选中一个类
    random_bg = random.choice(bg_classes)
    # 传入模板上下文
    return render(request, '你的模板文件名.html', {'random_bg_class': random_bg})

• 模板层代码：
  将你原有代码替换为以下内容即可：

<div class="{{ random_bg_class }}">

</div>

方案2：全局上下文处理器（适合全站多页面都需要用到随机背景类的场景） #

如果多个页面都要用到该效果，逐个视图传值太繁琐，可以配置全局上下文处理器，所有模板自动获取随机类变量：

• 第一步：在你的应用目录下新建context_processors.py，内容如下：

import random

def random_bg_processor(request):
    bg_classes = ['bg-success', 'bg-primary', 'bg-light', 'bg-dark']
    return {'random_bg_class': random.choice(bg_classes)}

• 第二步：打开项目settings.py，找到TEMPLATES配置项，在OPTIONS的context_processors列表中追加你刚写的处理器路径：

TEMPLATES = [
    {
        # 其他原有配置不变
        'OPTIONS': {
            'context_processors': [
                # 原有其他处理器保留
                '你的应用名.context_processors.random_bg_processor',
            ],
        },
    },
]

• 第三步：直接在任意模板中调用变量即可，和方案1的模板用法完全一致：

<div class="{{ random_bg_class }}">

</div>

方案3：纯前端JS实现（不想改动后端代码时使用） #

直接在模板中插入JS代码实现随机加类，不需要修改后端逻辑：

<!-- 给需要加背景的div加个id方便选中 -->
<div id="random-bg-div">

</div>

<script>
const bgClasses = ['bg-success', 'bg-primary', 'bg-light', 'bg-dark']
const randomBg = bgClasses[Math.floor(Math.random() * bgClasses.length)]
document.getElementById('random-bg-div').classList.add(randomBg)
</script>

注意：如果使用bg-dark类时文字看不清，可以同步随机配套的文字类，比如和bg-dark配对text-white，其余背景类配对text-dark即可。

内容的提问来源于stack exchange，提问作者ced3j