如何仅为一个元素更改弹出框的 CSS？答案

【问题标题】：How to change CSS of popover for just one element?如何仅为一个元素更改弹出框的 CSS？
【发布时间】：2019-11-07 03:51:06
【问题描述】：

如何为特定的 Bootstrap 弹出框设置样式？

我正在使用 Twitter Bootstrap v4.0，并且可以通过 CSS 成功地为所有弹出框创建样式。但是，我找不到设置特定按钮样式的方法，也找不到通过 JS 动态更改样式的方法。

我希望根据不同的条件更改弹出框/工具提示的字体大小。最重要的是动态更改字体大小（我可以接受全局更改，尽管只更改某些按钮的弹出框是理想的）。

示例：这失败了... alert( $('.popover-body').css('font-size') )

它只是返回“未定义”，即使 CSS 是：

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

并且弹出框会相应地响应此字体大小。

【问题讨论】：

标签： bootstrap-4 popover

【解决方案1】：

CSS 是分层的；你需要在链条上工作。假设您有两个 poover，#one 和 #two，您可以将 #one .popover-body 定位为使用 CSS 专门定位第一个 popover-body。

alert($('.popover-body').css('font-size')) 失败，因为 $('.popover-body') 返回一个 NodeList 元素集合。例如，您要么需要遍历它们（使用 .each() 之类的东西），要么使用 $('.popover-body')[0].css('font-size')) 通过索引单独定位它们。

【讨论】：

$('.popover-header')[0] 返回未定义
JSON.stringify($('.popover-header')) 返回 {"length":0,"prevObject":{"0":{"location":{"href":" ","ancestorOrigins":{},"origin":"file://","protocol":"file:","host":"","hostname":"","port":"", "pathname":"","search":"","hash":""}},"context":{"location":{"href":"","ancestorOrigins":{},"origin" :"file://","protocol":"file:","host":"","hostname":"","port":"","pathname":"","search":" ","hash":""}},"length":1},"context":{"location":{"href":"","ancestorOrigins":{},"origin":"file:/ /","protocol":"file:","host":"","hostname":"","port":"","pathname":"","search":"","hash" :""}},"selector":".popover-header"}