Django 模板中的动态内联 CSS 样式

Posted 2023-02-24

【中文标题】Django 模板中的动态内联 CSS 样式

【英文标题】：Dynamic inline CSS styling in Django template

【发布时间】：2020-08-11 01:21:23

【问题描述】：

我是 Django 新手，正在尝试弄清楚如何使用仅对用户所在的当前类别有效的动态 CSS。

我有一个带有一些类别的侧导航，用户所在的任何类别都应该在使用类时处于活动状态。

这就是我目前拥有的东西：

% for category in categories %
   <li><a href="% url 'category' category.id %"
         % if category.id in request.path %
             class="uk-text-bold"
         % endif % > category.name </a></li>
         % endif %

这显然是不正确的，也不起作用，所以我想有一种适当的方法来做这样的事情，我只是很难理解或发现这一点。

感谢任何帮助！谢谢。

【问题讨论】：

相信你能找到答案here

【参考方案1】：

您可以制作一个 html 文件，例如style.html 像这样

% load static %
<style>

% if your_condition %

.active
  /*your styles here*/
 

% endif %
</style>

并将其包含在您的主 html 文件中。

% for category in categories %
                                <li><a href="% url 'category' category.id %"
                                            class="classname"> category.name </a> 
                                </li>
                        % endfor %

您可能需要 js 来处理向元素添加和删除活动类。 应该是这样的

var categories = document.getElementsByClassName('classname');

for (var i = 0; i < tabs.length; i++) 
   tabs[i].addEventListener("click", function () 
    Array.prototype.forEach.call(document.getElementsByClassName("classname"), 
    function (tab) 
       tab.classList.remove('active');
    );
    this.classList.add('active');
   );
   

我希望这会对你有所帮助。 我也建议你阅读django custom template tag .with 模板标签你可以为你的 html 编写一个动态样式标签，并在需要时调用它。

【讨论】：

太棒了，这很有帮助！谢谢@Amir。我会调查的。