在 Django 项目中，通过 JavaScript 进行样式设置不起作用[重复]答案

【问题标题】：In Django project, styling through JavaScript is not working [duplicate]在 Django 项目中，通过 JavaScript 进行样式设置不起作用[重复]
【发布时间】：2021-09-07 21:46:18
【问题描述】：

我是 Django 和 Python 的新手。在工作期间，我整天都在尝试解决问题但失败了。一切似乎都很好，并且还在 w3schools 和其他测试站点上工作。这是 index.js 中的两行代码-

alert(window.innerWidth);
document.getElementById("body2").style.color = "#0000ff";

第一行显示窗口的宽度，但第二行不做任何事情。我曾尝试更改颜色、字体大小、粗细...等，但在内联、内部或外部 css 上一切正常的情况下没有任何效果。 JS 样式的唯一问题。这里，base.html 的 Head 部分

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSP: Home</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <link rel="shortcut icon" type="image/png" href="{% static 'favicon.png' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'base.css' %}">
    {% block ecss %}
    {% endblock %}
</head>

我已经通过 ecss 块链接了 index.js 和 index.css....

【问题讨论】：

最后，问题已通过在加载 html 文件和 DOM 元素后使用带链接激活 ja 的 defer 解决。感谢您尝试帮助我。

标签： javascript python html css django

【解决方案1】：

当涉及到 django 时，您没有在正确的上下文中使用块，因为在您的代码中，您在块语句中什么也没做。无论如何，什么是block ecss？我建议阅读以下内容：https://docs.djangoproject.com/en/3.2/ref/templates/language/

如果我假设 ecss 是额外的 css，如果是这种情况，您可以在脑海中调用它：

{% block ecss %}
<link rel="stylesheet" type="text/css" href="{% static 'css/ecss.css' %}">
{% endblock %}

把你的js放在base.html中结束body标签之前的底部，在这种情况下就是这样（因为在你的base.html中，index.js会被到处使用）：

<script type="text/javascript" src="{% static 'js/index.js' %}"></script>

【讨论】：

"当涉及到 django 时，您没有在正确的上下文中使用块，因为在您的代码中，您在块语句中什么也不做"，嗯，这是很常见的在 Django 模板中看到空块，然后由扩展模板填充，OP 可能只是忘记显示它们......