Question

我正在创建一个基于Flask的网络应用。我需要动态修改元素的CSS。

更具体地说，我有一个我想从Python中读取的文件。基于我从文件中读取的内容，我想修改元素的CSS。只是为了给你一个想法，

with open('xyz') as f:
   if f.readline() == 'foo':
       $("#baz").css("visibility", "none")

我尝试过使用Opal和Ruby，但是我无法设置'opal-jquery'的东西。任何路径下的任何指导都会受到赞赏。

Answer 1

如果您将CSS配置为后端渲染过程的一部分，则将样式更改视为模板中的任何其他变量：

from flask import Flask, render_template_string

app = Flask(__name__)

index_page = """<html><body><h2 style="color: {{ color }}">Index page</h2></body></html>"""

@app.route('/')
def index():
    with open('/path/to/file.txt') as f:
        color = f.readlines()[-1]
    return render_template_string(index_page, color=color)

if __name__ == '__main__':
    app.run()

如果file.txt结束，例如blue，则标题将为蓝色。同样适用于red，yellow等

您正在更改CSS值而不是表中的值这一事实对Jinja没有任何影响。

相反，如果您在服务器呈现页面并将其发送到客户端后尝试更新CSS值，则需要使用JavaScript。在后端，添加一个额外的视图以从服务器获取该数据：

@app.route('/lastline')
def last_line():
    with open('/path/to/file.txt') as f:
        color = f.readlines()[-1]
    return color

使用jQuery从客户端访问此端点：

<script>
    function updateCSS() {
        $.ajax({
            url: "{{ url_for('last_line') }}",
            method: 'GET',
            success: function(data) {
                $("#baz").css("visibility", data);
            }
        });
    }
    setInterval(updateCSS, 1000);
</script>

这将每1秒检查一次文件并相应地更新元素的CSS。

如何使用Python动态修改CSS？

1 个答案: