Flask_5

JavaScript、CSS与Jinja2

行内/嵌入式JavaScript/CSS

  如果要在JavaScript和CSS文件中使用Jinja2代码，那么就在HTML中使用<style>和<script>标签定义这部分CSS和JavaScript代码。但这种方式并不好，行内JavaScript/CSS会让维护变得困难。避免把太多JavaScript代码留在HEML中的方法就是尽量将要使用的Jinja2变量值在HTML模板中定义为JavaScript变量。

 

定义JavaScript/CSS变量

  对于要在JavaScript中获取的数据，如果是元素特定的数据比如id值，可以通过HTML元素的data-*属性存储。*是可以自定义的名称，比如data-id、data-name。

<span data-id="{{ user.id }}" data-username="{{ user.username }}">{{ user.username }}</span>

在JavaScript中，我们通过DOM元素的dataset属性获取data-*属性值，例如：element.dataset.username,或者可以用getAttribute()方法，例如：element.getAttribute('data-username')。在使用JQuery时直接调用data方法：$element.data('username')。

 

对于要全局使用的数据，可以在页面中使用嵌入式JavaScript定义变量，如果不能定义为变量，那就想办法定义为函数。

<script type="text/javascript">
    let foo = '{{ foo_variable }}'
</script>

 

CSS也类似，有些时候会需要将Jinja2变量值传入CSS文件，比如想把用户设置的主题颜色设置到对应CSS规则中，或是需要将static目录下的背景图片上传，我们可以把这些值定义为CSS变量：

:root {
    --theme-color: {{ theme_color }};
    --background-url: {{ url_for('static',filename = 'background.jpg') }}
}

在CSS文件中，使用var()函数传入变量名即可获取对应变量值：

#foo {
    color: var(--theme-color);
}

#bar {
    background: var(--background-url);
}