如何将 CSS 样式动态添加到 HEAD 标记

How to add a CSS style dynamically to HEAD tag?

本文关键字：添加 HEAD 标记 动态 样式 CSS      更新时间：2023-09-26

我有一个不寻常的情况，我需要从HTML document A中获取STYLE标签（仅第二个标签）的内容，并将其添加到HTML DOCUMENT B LINK标签之后的HEAD标签中。A 和 B 位于同一台服务器上。它必须是动态的，我无法控制生成的 CSS （cms）。

我想知道：

  • 最好的方法是什么，我需要避免页面闪烁
  • 什么是更便宜的

我可以使用HTML5和JQUERY。我主要针对网络套件。

    HTML A
    <html>
    <head>
    <style type="text/css">
                .styleA {}
    </style>
<!-- I am interested just in the following style tag
    <style type="text/css">
                .styleB {}
    </style>
//>
    </head>
    <body>
    </body>
    </html>

    HTML B
    <html>
    <head>
      <link rel="stylesheet" type="text/css" href="someothercss.css">
    <!-- should be injected here -->
    </head>
    <body>
    </body>
    </html>

你可以用jQuery创建一个单独的.js文件来操作css（或者只是把它添加到HTML代码本身中），然后如果你愿意，只需将.js链接到HTML B或两者。只需将需要继承样式的所有元素设置为类，然后编写 jQuery 来操作该类的 css。

示例代码：

    $(".className").css({"background-color":"black","font-size":"12px"});

您可以在大括号中添加和操作任何 css 样式。

您可以尝试以下方法：

  1. 您可以在每个页面中添加该特定的 CSS 样式。

  2. 在单独的样式表中具有该特定的CSS样式。 并引用该样式在需要的页面中工作表。

相关文章：