Как изменить CSS поповера только для одного элемента?

Question

Как стилизовать определенные всплывающие окна Bootstrap?

Я использую Twitter Bootstrap v4.0 и могу успешно создать стиль для всех всплывающих окон с помощью CSS. Однако я не могу найти способ стилизации определенных кнопок или динамического изменения стиля с помощью JS.

Я пытаюсь изменить размер шрифта всплывающей подсказки / всплывающей подсказки в зависимости от условий, которые меняются. Что наиболее важно, это динамическое изменение размера шрифта (я могу жить с глобальным изменением, хотя идеальным было бы изменение только всплывающих окон определенных кнопок).

Пример: это не удается ... alert ($ ('. Popover)-body '). css (' font-size '))

Он просто возвращает "undefined", даже если CSS это:

.popover-body {
    font-size: 10px !important;
    }

, и всплывающие окна реагируют соответствующим образом на этот шрифт-size.

Answer 1

CSS является иерархическим;вам нужно будет работать по цепочке. Предполагая, что у вас есть два poovers, #one и #two, вы можете нацелиться на #one .popover-body, чтобы исключительно нацеливаться на первое тело popover с помощью CSS.

alert($('.popover-body').css('font-size')) завершается неудачей, потому что $('.popover-body') возвращает NodeList коллекция элементов. Вам нужно будет либо зациклить их (с чем-то вроде .each()), либо нацелить их по индексу с помощью, например, $('.popover-body')[0].css('font-size')).