Django: изменение цвета шрифта внутри функции javascript

Question

Добрый день,

цвет шрифта моего html тела изменяется через css -файл со следующим кодом:

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

Теперь я включил Bootstrap -Поповер ...

<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 -файла некоторые части текст в моем попвере (точнее, "название") также отображается белым цветом! Я действительно новичок в javascript, так возможно ли - и когда это возможно, какое было бы лучшее решение - изменить мой цвет шрифта в моем Popover на черный?

Спасибо всем вам !

Answer 1

Если ваш css не изменяется динамически, тогда используйте только css

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

Но если вы меняете свое тело динамически, тогда вы можете добавить класс к вашему поповеру. 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

добавьте класс в ваш поповер и добавьте новое правило css для этого класса:

.popover-class {

   color: black;

}