javascript - 如何在 JavaScript 中编辑小部件/片段的样式

Question

我收到了以下代码，我已将其嵌入到我的网站中，但我需要编辑此代码段的样式并更改标题的颜色。

<script type="text/javascript">
var bkt_init_widget = {
    type: "default",
    srvsrc: "https://app.book.com",
    publickey: "somerandomnumbersinhere",
    lang: "es",
    scroll: false,
    services: [],
    agendas: []
};
var oScriptHtmlElement = document.createElement("script");
oScriptHtmlElement.setAttribute("type", "text/javascript");
oScriptHtmlElement.setAttribute("src", bkt_init_widget.srvsrc + "/js/widgets/loader.js?v=" + (new Date().getFullYear()) + (new Date().getMonth()) + (new Date().getDate()) + (new Date()).getHours());
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(oScriptHtmlElement);
</script>

但我不明白该怎么做，因为 js 文件是从以下网址加载的:

https://app.book.com/js/widgets/loader.js

该文件包含一个负责加载不同样式的函数。如果我没有“访问”这些 css 文件的权限，我该如何修改样式呢？

提到的功能:

function loadCss() {
    var someCss = ['reset.css', 'common.css', 'fields.css',  'default/services.css', 'default/agendas.css', 'default/datetime.css',
        'default/signup.css', 'default/summary.css', 'default/signin.css', 'button/button.css', 'default/creditcardcapture.css', 'default/account.css', 
        'default/changepassword.css', 'default/history.css', 'default/custom.css'];...etc

Answer 1

您可以随时调整它的特定规则，如果您只想更改段落的行高或标题的颜色，则无需重新创建整个 CSS 文件。如果小部件实际上位于您的页面中并且不是 iframe，您可以创建自己的文件来覆盖您选择的元素(如果您别无选择，则使用更强的选择器和 !important)。更强的选择器通常意味着当前选择器加上:not(#a)，这增强了选择器并且无害。

确保 Bookitit 不提供覆盖某些样式的 native 方法。有些小部件不具有该选项，因为它会“破坏”它的身份，即它所基于的愿景。