使用（纯）Javascript加载CSS的优势与劣势

用Javascript加载CSS文件有什么缺点/优点吗

这就是我问的原因， 我有一个div，它模拟了一个物理的it页面。CSS加载完美，没有问题。但是假设我想制作一个公司信件的标题类，因此它看起来基本上与A4页面完全相同，但是在页面顶部添加了公司徽标，我知道我不能用css来实现这一点，因为css纯粹是样式，但是如果我用javascript加载css链接，然后根据其类名定制页面，我知道我可以做到这一点

所以我的问题是：加载和定制所有必要的东西 2.在defaultstyles.js文件中，我想在必要的页面顶部自动添加带有公司徽标的图像标签

用javascript加载css有什么缺点/优点吗

提前谢谢

编辑： 为了给我的难题增加更多细节，这就是我所拥有的

当前：

包含一个div的类名为“A4Portrait”的页面

链接到自定义“A4Portrait”类的页面的defaults.css

顶部带有公司标志的图像标签，模仿信头

提议的

使用一个javascript文件（比如defaultstyles.js）加载所有样式，该文件在页面加载上运行并自定义所有必要的内容

在defaultstyles.js文件中，我想在相应的div中自动添加带有公司徽标的图像标记

注意

---

我不是问怎么做，我已经知道了，只是用建议的方式做的优缺点

我建议将信头的css放在包含所有其他样式的同一个文件中

用js加载css的缺点是会创建不必要的http连接。而且速度会慢得多，因为您必须等待页面加载后才能运行js

编辑：我想公平地说一下优势： 另一方面，这要视情况而定。如果你的信头css很大（我对此表示怀疑），而且信头样式很少使用（仅在打印时使用），那么使用js加载额外的css可能会很有用。但是你只能获得一点带宽，而且css可能会在缓存中，因为它是内部网站，所以可能不值得付出努力

在我阅读更新的问题后，又进行了一次编辑：

---

如果使用js添加图像标记，则上述所有内容都适用，但不会导致更多http连接。

我建议将信头的css放在包含所有其他样式的同一文件中

用js加载css的缺点是会创建不必要的http连接。而且速度会慢得多，因为您必须等待页面加载后才能运行js

编辑：我想公平地说一下优势： 另一方面，这要视情况而定。如果你的信头css很大（我对此表示怀疑），而且信头样式很少使用（仅在打印时使用），那么使用js加载额外的css可能会很有用。但是你只能获得一点带宽，而且css可能会在缓存中，因为它是内部网站，所以可能不值得付出努力

在我阅读更新的问题后，又进行了一次编辑：

---

如果您使用js添加图像标记，上述所有内容都适用，但这不会导致更多http连接。

为什么您不能使用CSS添加信头？信头是一个图像，我已经在做的是使用img标记加载它。只是想知道有没有更快的方法。就像一个多功能一体的解决方案一样，我只是想知道这样做的好处。为什么不能用CSS添加信头？信头是一个图像，我已经在做的是用img标签加载它。只是想知道有没有更快的方法。就像一个多功能一体的解决方案一样，我只是想知道这样做的好处。好吧，这就是我正在开发的一个公司内部网站，它有一个defaults.css文件，可以加载每个页面的默认值，比如字体系列和（在本例中特别是）A4PortraitPage类样式（这是一个div）。你是说把样式放在defaults.css中？我已经做过了。但不管怎样，谢谢你的回答，我一直在寻找一些改变加载时间的东西，如果我放慢了这个过程，那么我将坚持传统的做事方式。谢谢你的用户2079303！未标记为答案只是为了听取其他建议…好吧，这就是我所拥有的，我正在开发的公司内部网站，有一个defaults.css文件，它为每个页面加载默认值，比如字体系列和（在本例中具体地说）A4PortraitPage类样式（这是一个div）。你是说把样式放在defaults.css中？我已经做过了。但不管怎样，谢谢你的回答，我一直在寻找一些改变加载时间的东西，如果我放慢了这个过程，那么我将坚持传统的做事方式。谢谢你的用户2079303！未标记为答案只是为了听到其他建议。。。