为特定的DIV加载外部CSS

所以基本上我有一个拥有自己CSS的页面。在我的服务器上，我有一个不同的CSS样式文件的文件夹，所以我想在他们的页面上有一个“预览”窗口。我可以以某种方式，也许使用JavaScript，只将外部CSS文件应用于某个DIV，而不是整个页面，以便我可以获得自定义CSS文件的“预览”？我宁愿不使用iframe。为特定的DIV加载外部CSS

来源

2011-09-11 Martin Marinov

CSS适用于整个文档。

如果你想限制范围，那么你需要使用后代选择器。

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

则必须将此应用到每一个选择，并考虑到groups（所以它并不像前缀整个样式表和后面添加简单的每}）

你也将找到一个样式表主要文件适用于您的预览。

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

来源

2011-09-11 15:20:30 Quentin

您可以使用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);

来源

2011-09-11 15:24:14 Will

像昆汀说，你可以用后代选择限制范围。像less可以帮助很多。例如，我想有“bootstrap.css”仅适用于#MyDiv，在“my.less”：

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

“bootstrap.css”应该改名（或链接），以“bootstrap.less ”。运行：

lessc my.less my.css

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

来源

2013-01-06 17:52:13

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

@Jayanta你可以使用less.js来做到这一点，这意味着渲染过程在客户端完成。尽管如此，不建议在生产中使用。有关详细信息，请参阅http://lesscss.org/#client-side-usage。 – SubRed

不应该@import规则总是先于所有其他类型的规则？ –

对于我的一个项目，我需要完全一样的东西，但也支持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）到一个特定的区域（elementSelector）在DOM。 回调成功在成功加载文件并应用CSS时调用。加载CSS文件时出现错误时会调用回调错误。

祝你好运！

来源

2013-08-15 12:11:22

为特定的DIV加载外部CSS

回答

相关问题