javascript - 如何在仅限 JavaScript 的类中引用 CSS 文件

标签 javascript html css

我有一个 javascript 文件,它的功能之一是使用 javascript 创建一些 HTML。

HTML 在运行时创建并创建以下元素:

var oBox = document.createElement("notifiedusersbubble");
oBox.style.color="#808080";
oBox.style.display = "none";
oBox.style.position= "absolute";
oBox.style.width="200px";
oBox.style.border = '1px solid black';
oBox.style.background = "#DDEFF1";
oBox.style.fontFamily="arial,sans-serif";
oBox.style.padding="2px 2px 2px 4px";

我不想将所有样式都留在 javascript 文件中,而是想将 t 放入 CSS 文件并从那里引用它。

问题是,我不知道如何使用 javascript 执行此操作。我知道要使用 HTML 这样做,我会在 <head> 中编写以下内容标签:

<link href="style.css" rel="stylesheet" type="text/css" />

最佳答案

您可以像创建任何其他元素一样创建 link 元素:

var link = document.createElement('link');
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
document.querySelector("head").appendChild(link);

...但话虽如此,我通常希望您将其留给页面作者,只需将其列为脚本的要求,即必须将 CSS 放在页面上——尤其是因为它可以让他们将这些内容结合起来CSS 与其他 CSS 一起避免大量 HTTP 请求等。这是每个主要框架/库(jQuery UI、Bootstrap 等)所做的。

关于javascript - 如何在仅限 JavaScript 的类中引用 CSS 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27312740/

相关文章:

javascript - 延迟加载模块和预加载模块策略哪一种更好?

javascript - 在 Angular 应用程序中加载完成后如何停止旋转器?

javascript - 使用 AJAX 和 FORM 自动刷新 DIV,按下按钮后有间隔

jQuery UI 可在固定元素上拖动

javascript - 是否有jquery方法或其他解决方案只能检测直接子节点的变化?

javascript - 在没有 jQuery 的情况下获取 Canvas 中的光标位置

javascript - 我是否必须在第一次填充 sqlite 数据库时创建所有表?

javascript - 如何在不影响其余页面样式的情况下加载带样式的 HTML 文件?

css - firefox/ie/chrome/Safari 之间的.css 问题

css - 每 3 秒重播一次动画 CSS3