时间戳

首页 > 解决方案 > 如何在 Python 中更改 CSS 类 - 烧瓶网站

python - 如何在 Python 中更改 CSS 类 - 烧瓶网站

问题描述

在下面的示例中使用 python 和 flask 框架将类名形式.black更改为最简单的方法是什么？.white例如：鼠标点击 div 后#area？

CSS 文件：

#area {position:absolute;width:100px;height:100px;}
.black {background-color:#000;}
.white {background-color:#fff;}

HTML 文件：

<!doctype html>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='style.css')}}">
    </head>
    <body>
    <div id="area" class="black"></div>
    </body>
</html>

标签： pythoncssflask

解决方案

这个需求JavaScript和它无关Flask

使用示例querySelector()

<div id="area" class="black" onclick="change();"></div>

<script>
area = document.querySelector('#area');

function change(){
    area.classList.replace('black', 'white');
}
</script>

或使用特殊变量this

<div id="area" class="black" onclick="change(this);"></div>

<script>
function change(item){
    item.classList.replace('black', 'white');
}
</script>

最终你可以使用addEventListener而不是onclick

<div id="area" class="black"></div>

<script>
function change(){
    this.classList.replace('black', 'white');
}

area = document.querySelector('#area');
area.addEventListener('click', change);
</script>

或更短

<div id="area" class="black"></div>

<script>
area = document.querySelector('#area');
area.addEventListener('click', function(){
    this.classList.replace('black', 'white');
});
</script>

甚至更短一点

<div id="area" class="black"></div>

<script>
document.querySelector('#area').addEventListener('click', function(){
    this.classList.replace('black', 'white');
});
</script>

最小的工作代码：

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <title>Title</title>

<style>
#area1 {width:100px;height:100px;}
#area2 {width:100px;height:100px;}
#area3 {width:100px;height:100px;}
#area4 {width:100px;height:100px;}
.black {background-color:#000;}
.white {background-color:#fff;}
</style>
</head>

<body>
    <div id="area1" class="black" onclick="change1();"></div>
<br>
    <div id="area2" class="black" onclick="change2(this);"></div>
<br>
    <div id="area3" class="black"></div>
<br>
    <div id="area4" class="black"></div>

<script>
area1 = document.querySelector('#area1');

function change1(){
    area1.classList.replace('black', 'white');
    console.log('change1');
}

function change2(item){
    item.classList.replace('black', 'white');
    console.log('change2');
}

function change3(){
    this.classList.replace('black', 'white');
    console.log('change3');
}

area3 = document.querySelector('#area3');
area3.addEventListener('click', change3);

area4 = document.querySelector('#area4');
area4.addEventListener('click', function(){
    this.classList.replace('black', 'white');
    console.log('change4');
});

</script>

</body>

</html>

推荐阅读