是否可以使用Javascript将CSS样式表导入html页面？如果是这样，怎么办呢？

P.Sjavascript将托管在我的网站上，但我希望用户能够放入他们网站的 <head> 标签，并且它应该能够将我服务器上托管的css文件导入当前网页 . （css文件和javascript文件都将托管在我的服务器上） .

15 回答

这是"old school"这样做的方式，希望能在所有浏览器中使用 . 从理论上讲，你会使用 setAttribute ，不幸的是，IE6并不支持它 .

var cssId = 'myCss';  // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.id   = cssId;
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'http://website.com/css/stylesheet.css';
    link.media = 'all';
    head.appendChild(link);
}

此示例检查是否已添加CSS，因此仅添加一次 .

将该代码放入javascript文件中，让最终用户只包含javascript，并确保CSS路径是绝对的，以便从服务器加载 .

VanillaJS

下面是一个使用普通JavaScript根据URL的文件名部分将CSS链接注入 head 元素的示例：

<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();

var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";

document.getElementsByTagName( "head" )[0].appendChild( link );
</script>

在结束 head 标记之前插入代码，并在呈现页面之前加载CSS . 使用外部JavaScript（ .js ）文件将导致出现无格式内容（FOUC）的Flash .

回复于 2024-04-25T17:29:20+08:00

如果你使用jquery：

$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');

回复于 2024-04-25T17:29:20+08:00

我想像这样的脚本会做的事情：

<script type="text/javascript" src="/js/styles.js"></script>

该JS文件包含以下语句：

if (!document.getElementById) document.write('<link rel="stylesheet" type="text/css" href="/css/versions4.css">');

如果要引用您的网站，javascript和css的地址必须是绝对的 .

本文"Say no to CSS hacks with branching techniques"文章讨论了许多CSS导入技术 .

但"Using JavaScript to dynamically add Portlet CSS stylesheets"文章还提到了CreateStyleSheet的可能性（IE的专有方法）：

<script type="text/javascript">
//<![CDATA[
if(document.createStyleSheet) {
  document.createStyleSheet('http://server/stylesheet.css');
}
else {
  var styles = "@import url(' http://server/stylesheet.css ');";
  var newSS=document.createElement('link');
  newSS.rel='stylesheet';
  newSS.href='data:text/css,'+escape(styles);
  document.getElementsByTagName("head")[0].appendChild(newSS);
}
//]]>

回复于 2024-04-25T17:29:20+08:00

调用以下函数以动态加载CSS或JavaScript文件 .

function loadjscssfile(filename, filetype) {
  if (filetype == "js") { //if filename is a external JavaScript file
    // alert('called');
    var fileref = document.createElement('script')
    fileref.setAttribute("type", "text/javascript")
    fileref.setAttribute("src", filename)
    alert('called');
  } else if (filetype == "css") { //if filename is an external CSS file
    var fileref = document.createElement("link")
    fileref.setAttribute("rel", "stylesheet")
    fileref.setAttribute("type", "text/css")
    fileref.setAttribute("href", filename)
  }
  if (typeof fileref != "undefined")
    document.getElementsByTagName("head")[0].appendChild(fileref)
}

传递名称为 filename 参数的完整文件路径 .

回复于 2024-04-25T17:29:20+08:00

3

我知道这是一个非常古老的线程，但这是我的5美分 .

根据您的需求，还有另一种方法可以做到这一点 .

我有一个案例，我希望css文件只活动一段时间 . 像css切换 . 激活css然后在另一个事件之后将其取消激活 .

不是动态加载css然后删除它，你可以在新css中的所有元素前添加一个Class / an id，然后只需切换css基本节点的class / id（如body标签） .

您可以使用此解决方案初始加载更多css文件，但您有一种更动态的切换css布局的方法 .

回复于 2024-04-25T17:29:20+08:00

如果您想知道（或等待）样式本身已加载，这将起作用：

// this will work in IE 10, 11 and Safari/Chrome/Firefox/Edge
// add ES6 poly-fill for the Promise, if needed (or rewrite to use a callback)

let fetchStyle = function(url) {
  return new Promise((resolve, reject) => {
    let link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.onload = function() { resolve(); console.log('style has loaded'); };
    link.href = url;

    let headScript = document.querySelector('script');
    headScript.parentNode.insertBefore(link, headScript);
  });
};

回复于 2024-04-25T17:29:20+08:00

Element.insertAdjacentHTML具有非常好的浏览器支持，并且可以在一行中添加样式表 .

document.getElementsByTagName("head")[0].insertAdjacentHTML(
    "beforeend",
    "<link rel=\"stylesheet\" href=\"path/to/style.css\" />");

回复于 2024-04-25T17:29:20+08:00

3

有一个通用的jquery插件可以根据需要加载css和JS文件同步和asych . 它还会跟踪已经加载的内容:)请参阅：http://code.google.com/p/rloader/

回复于 2024-04-25T17:29:20+08:00

这里's a way with jQuery'的元素创建方法（我的偏好）和回调 onLoad ：

var css = $("<link>", {
  "rel" : "stylesheet",
  "type" :  "text/css",
  "href" : "style.css"
})[0];

css.onload = function(){
  console.log("CSS IN IFRAME LOADED");
};

document
  .getElementsByTagName("head")[0]
  .appendChild(css);

回复于 2024-04-25T17:29:20+08:00

在现代浏览器中，您可以像这样使用 promise . 创建一个带有promise的加载器函数：

function LoadCSS( cssURL ) {

    // 'cssURL' is the stylesheet's URL, i.e. /css/styles.css

    return new Promise( function( resolve, reject ) {

        var link = document.createElement( 'link' );

        link.rel  = 'stylesheet';

        link.href = cssURL;

        document.head.appendChild( link );

        link.onload = function() { 

            resolve(); 

            console.log( 'CSS has loaded!' ); 
        };
    } );
}

那么显然你想在CSS加载后完成一些事情 . 您可以调用CSS加载后需要运行的函数，如下所示：

LoadCSS( 'css/styles.css' ).then( function() {

    console.log( 'Another function is triggered after CSS had been loaded.' );

    return DoAfterCSSHasLoaded();
} );

有用的链接，如果你想深入了解它的工作原理：

Official docs on promises

Useful guide to promises

A great intro video on promises

回复于 2024-04-25T17:29:20+08:00

2

YUI library可能就是你要找的东西 . 它还支持跨域加载 .

如果你使用jquery，this plugin会做同样的事情 .

回复于 2024-04-25T17:29:20+08:00

374

使用此代码：

var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", "external.css");
document.getElementsByTagName("head")[0].appendChild(element);

回复于 2024-04-25T17:29:20+08:00

48

您可以使用此YUI library或使用此article to implement

回复于 2024-04-25T17:29:20+08:00

下面是一个用于加载JS和/或CSS的完整代码

function loadScript(directory, files){
  var head = document.getElementsByTagName("head")[0]
  var done = false
  var extension = '.js'
  for (var file of files){ 
    var path = directory + file + extension 
    var script = document.createElement("script")
    script.src = path        
    script.type = "text/javascript"
    script.onload = script.onreadystatechange = function() {
        if ( !done && (!this.readyState ||
            this.readyState == "loaded" || this.readyState == "complete") ) {
            done = true
            script.onload = script.onreadystatechange = null   // cleans up a little memory:
            head.removeChild(script)  // to avoid douple loading
        }
  };
  head.appendChild(script) 
  done = false
 }
}

function loadStyle(directory, files){
  var head = document.getElementsByTagName("head")[0]
  var extension = '.css'
  for (var file of files){ 
   var path = directory + file + extension 
   var link = document.createElement("link")
   link.href = path        
   link.type = "text/css"
   link.rel = "stylesheet" 
   head.appendChild(link) 
 }
}

(() => loadScript('libraries/', ['listen','functions', 'speak', 'commands', 'wsBrowser', 'main'])) ();
(() => loadScript('scripts/', ['index'])) ();

(() => loadStyle('styles/', ['index'])) ();

回复于 2024-04-25T17:29:20+08:00

var fileref = document.createElement("link")
fileref.setAttribute("rel", "stylesheet")
fileref.setAttribute("type", "text/css")
fileref.setAttribute("th:href", "@{/filepath}")
fileref.setAttribute("href", "/filepath")

我正在使用百里香，这很好用 . 谢谢

回复于 2024-04-25T17:29:20+08:00

如何使用Javascript加载CSS文件？

15 回答

VanillaJS

相关问题