Javascript 加载特定DIV的外部CSS

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

CSS适用于整个文档

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

e、 g.

_div的id_.rest.of.the.selector{}

您必须将此应用于每个选择器，并将其考虑在内（因此，这并不像在整个样式表前加前缀并在每个

}

后加后缀那么简单）

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

---

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

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

\div id\35;元素在div{}

中

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

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

---

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

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

---

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

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

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

函数renderCSSForSelector（css，选择器）{
返回（（css+）| |“”）。替换（/\n |\t/g，“”）
.替换（/\s+/g，“”）
.replace（/\s*\/\*.？\*\/\s*/g，“”）
.replace（/（^|\}）（.*）（\{）/g，函数（$0，$1，$2，$3）{
var collector=[]，parts=$2.split（“，”）；
用于（var i部分）{
collector.push（选择器+“”+部件[i]。替换（/^\s*|\s*$/，“”）；
}
返回$1+“”+收集器。加入（“，”+“”+“”+3；
});
}
函数applyCSSToElement（css、elementSelector）{
$（“head”）.append（“+renderCSSForSelector（css，elementSelector）+”）；
}
函数applyCSSFileToElement（cssUrl、elementSelector、callbackSuccess、callbackError）{
callbackSuccess=callbackSuccess | | function（）{}；
callbackError=callbackError | | function（）{}；
$.ajax({
网址：cssUrl，
数据类型：“文本/css”，
成功：功能（数据）{
applyCSSToElement（数据、元素选择器）；
callbackSuccess（）；
},
错误：函数（jqXHR）{
callbackError（）；
}
})
}

功能说明：

• renderCSSForSelector-实际上为每个样式定义预先添加了一个选择器
• applyCSSToElement-获取CSS源数据，将renderCSSForSelector应用到HEAD标记中
• applyCSSFileToElement将CSS文件（cssUrl）应用于DOM中的特定区域（elementSelector）。当成功加载文件并应用CSS时，调用callbackSuccess。当加载CSS文件时出错，调用callbackError

---

祝你好运

我们可以使用javascript吗？@Jayanta您可以使用较少的.js来执行此操作，这意味着渲染过程是在客户端完成的。但不建议在生产使用中使用。有关详细信息，请参见此处。@import规则不应该总是优先于所有其他类型的规则吗？这正是我所需要的。我只想将引导类应用于一个特定的div，这非常有效。对于导入文件中带有逗号的选择器，有没有办法做到这一点？您拥有的CSS只会将

.classA、.classB

转换为

#MyDiv.classA、.classB

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

lessc my.less my.css

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();
        }
    })
}