Django:在javascript函数中更改字体颜色

Question

你好，

我的html正文的字体颜色是通过一个css文件更改的，代码如下：

body {
background-color: #6d6a6a;
color: white;
}

现在我已经包含了一个Bootstrap Popover。。。

<button type="button" class="btn btn-sm btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

以及必要的脚本。。。

<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>

但由于我的css文件，我的popver中的一些文本部分(确切地说是"标题"(也呈现为白色！我对javascript真的很陌生，所以有可能将Popover中的字体颜色更改为黑色吗？如果有可能，最好的解决方案是什么？

感谢大家！

Answer 1

如果你的css没有动态变化，那么只使用css

.popover .popover-content,.popover .popover-title  {
color: red;
}

但如果你正在动态地改变你的身体，那么你可以把类添加到你的popover中。Popover始终将.popover作为类名，因此您可以

$(document).ready(function () {
$(function () {
$('[data-toggle="popover"]').popover()
});           
});

function popchange(){
setTimeout(function () {
$(".popover").addClass('popover-danger');
}, 10); 
}

.popover-danger {
color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-sm btn-danger" data-toggle="popover"onclick="popchange()" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Answer 2

将类添加到您的popover中，然后为该类添加新的css规则：

.popover-class {
color: black;
}