时间戳

首页 > 解决方案 > 在 Django 项目中，通过 JavaScript 进行样式设置不起作用

javascript - 在 Django 项目中，通过 JavaScript 进行样式设置不起作用

问题描述

我是 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 ......

标签： javascriptpythonhtmlcssdjango

解决方案

当涉及到 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 中 end body 标记之前的底部，在这种情况下就是这样（因为在你的 base.html 中，index.js 将在任何地方使用）：

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

推荐阅读