Question

当我启动我的页面时，css完全搞砸了，因为我的js应该在点击（移动或标准网站css）上动态加载css。目前，它只是加载它们。这是代码：

function loadjscssfile(filename, filetype)
{
    if (filetype=="css")
    {
        var fileref = document.createElement("link");
        fileref.rel= "stylesheet";
        fileref.type = "text/css";
        fileref.href = filename;
        document.getElementsByTagName("head")[0].appendChild(fileref)

    }
}
loadjscssfile("HCSS.css", "css")

我在网站上有两个链接。一个加载移动css，另一个加载标准网站css。我把它链接成这样：

 <a href="javascript:loadjscssfile ('HCSS.css','css')"> load hcss </a>
 <br/>
 <a href="javascript:loadjscssfile ('foundation.css','css')"> load mobile </a>

Answer 1

您所追求的是交换css文件，而不仅仅是加载新文件。在jquery中，它可能会看起来像这样（代码没有经过测试）：

function swapCssFiles(fileToLoad, fileToUnload) {
  $('head link[href="'+fileToUnload'"]')   // select the tag with css to unload
      .attr('href', fileToLoad);  // swap the href attribute with the file to load
}

对于'纯'的javascript来说，这当然是可能的，但我是一个jQuery上瘾者，告诉你如何。如果你看到语法有多简单，你可以说出原因。

您的链接看起来像这样：

<a href="javascript:swapCssFiles ('HCSS.css','default.css')"> load hcss </a>

我希望这有用。

但是请注意，这不是我接近这个的方式。如果你想使用特定的css定位移动设备，我会使用mediaqueries来检测屏幕大小，而不是javascript。

我的Javascript应该在点击时加载一个CSS，但同时加载两个

1 个答案: