为特定 DIV 加载外部 CSS

Posted 2023-02-27

【中文标题】为特定 DIV 加载外部 CSS

【英文标题】：Load an external CSS for a specific DIV

【发布时间】：2011-09-11 15:17:53

【问题描述】：

所以基本上我有一个页面有它自己的 CSS。在我的服务器上，我有一个包含不同 CSS 样式文件的文件夹，所以我想在我的页面上为它们提供一个“预览”窗口。我能否以某种方式（也许使用 javascript）将外部 CSS 文件仅应用于某个 DIV，而不是整个页面，以便我可以获得自定义 CSS 文件的“预览”？我宁愿不使用 iframe。

【参考方案1】：

就像 Quentin 说的，你可以使用后代选择器来限制范围。像less 这样的东西会很有帮助。例如，我想让“bootstrap.css”仅适用于#MyDiv，在“my.less”中：

#MyDiv 
  @import "bootstrap.less";

“bootstrap.css”应重命名（或链接）为“bootstrap.less”。运行：

lessc my.less my.css

将#MyDiv 添加到导入文件中的每个选择器。

【讨论】：

我们可以使用 javascript 做到这一点吗？

@Jayanta 您可以使用 less.js 来执行此操作，这意味着渲染过程是在客户端完成的。但不建议在生产中使用。详情见这里lesscss.org/#client-side-usage。

不应该@import 规则总是在所有其他类型的规则之前？

这正是我所需要的。我只想将引导类应用到特定的 div 上，而且效果很好。

有没有办法为导入文件中带有逗号的选择器执行此操作？您拥有的 CSS 只会采用 .classA, .classB 并将其转换为 #MyDiv .classA, .classB

【参考方案2】：

CSS 适用于整个文档。

如果要限制范围，则需要使用后代选择器。

例如#id_of_div .the .rest .of .the .selector

您必须将它应用于每个选择器，并考虑到groups（所以它不像只是为整个样式表添加前缀并为每个 加上后缀那么简单）

您还可以找到应用于预览的主文档样式表。

框架可能是解决此问题的最佳方法。

【参考方案3】：

对于我的一个项目，我需要完全相同的东西，但也需要在 CSS 版本 2 中得到支持。 在网上搜索了很长时间后，我没有发现任何有用的东西，所以我决定使用 JavaScript 创建这个功能，它实际上可以将整个 css 应用于 DOM 中的特定元素。

只需调用函数applyCSSFileToElement，如下所述（依赖于jQuery库）：

function renderCSSForSelector(css, selector) 
    return ((css+"")||"").replace(/\n|\t/g, " ")
      .replace(/\s+/g, " ")
      .replace(/\s*\/\*.*?\*\/\s*/g, " ")
      .replace(/(^|\)(.*?)(\)/g, function($0, $1, $2, $3) 
        var collector = [], parts = $2.split(",");
        for (var i in parts) 
            collector.push(selector + " " + parts[i].replace(/^\s*|\s*$/, ""));
        
        return $1 + " " + collector.join(", ") + " " + $3;
    );


function applyCSSToElement(css, elementSelector) 
    $("head").append("<style type=\"text/css\">" + renderCSSForSelector(css, elementSelector) + "</style>");


function applyCSSFileToElement(cssUrl, elementSelector, callbackSuccess, callbackError) 
    callbackSuccess = callbackSuccess || function();
    callbackError = callbackError || function();
    $.ajax(
        url: cssUrl,
        dataType: "text/css",
        success: function(data) 
            applyCSSToElement(data, elementSelector);
            callbackSuccess();
        ,
        error: function(jqXHR) 
            callbackError();
        
    )

功能说明：

renderCSSForSelector

- 实际上为每个样式定义添加一个选择器。

applyCSSToElement

- 获取 CSS 源数据，应用 renderCSSForSelector 并将其注入 HEAD 标记。

applyCSSFileToElement

- 将 CSS 文件 (cssUrl) 应用到 DOM 中的特定区域 (elementSelector)。 callbackSuccess 在文件加载成功并应用 CSS 时调用。 callbackError 在加载 CSS 文件时调用。

祝你好运！

【参考方案4】：

您可以使用 iframe 加载预览页面或将 CSS 动态加载到页面中。但是，如果您只想将样式应用于 div，则必须在 CSS 选择器前面加上 div 的 id。 #div-id #element-inside-div .

加载它的脚本可能如下所示：

var cssFile = document.createElement( "link" );
cssFile.rel = "stylesheet";
cssFile.type = "text/css";
cssFIle.href = "file.css";
document.getElementsByTagName( "head" )[0].appendChild( cssFile );