为特定DIV加载外部CSS

Load an external CSS for a specific DIV

本文关键字：外部 CSS 加载 DIV      更新时间：2023-09-26

所以基本上我有一个有自己CSS的页面。在我的服务器上，我有一个包含不同CSS样式文件的文件夹，所以我想在我的页面上有一个"预览"窗口。我可以以某种方式，也许使用javascript，只将外部CSS文件应用于某个DIV，而不是整个页面，这样我就可以获得自定义CSS文件的"预览"吗？我宁愿不使用iframe。

正如Quentin所说，您可以使用派生选择器来限制范围。少一点可以帮很多忙。例如，我希望"bootstrap.css"仅适用于"my.less"中的#MyDiv：

#MyDiv {
  @import "bootstrap.less";
}

"bootstrap.css"应重命名(或链接(为"bootstrat.less"。运行：

lessc my.less my.css

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

CSS适用于整个文档。

如果要限制作用域，则需要使用派生选择器。

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

您必须将其应用于每个选择器，并考虑组(因此，这并不像在整个样式表中加前缀和在每个}中加后缀那么简单(

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

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

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

只需调用函数applyCSFileToElement，如下所述(取决于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-实际上为每个样式定义准备了一个选择器
  • applyCSToElement-获取CSS源数据，应用renderCSSForSelector并将其注入HEAD标记
  • applyCSFileToElement-将CSS文件(cssUrl(应用到DOM中的特定区域(elementSelector。当成功加载文件并应用CSS时，会调用callbackSuccess。当加载CSS文件时出错时，会调用回调错误

祝你好运！

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

加载它的脚本可能看起来像这样：

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