javascript - 页面加载后仅重新加载一个(切换)文件

Question

我必须在页面加载后(通过选择)在多个文件(用户主题选择)之间切换。

不幸的是，我不知道该怎么做。

我想做的是这样的:

betw: 我使用 Polymer.js

脚本:

 document.addEventListener('select-theme', function(e){
  // The event is fired from a nested component.

  console.log('select-theme: ', e.detail.themeValue)
  var theme = e.detail.themeValue;
  var importTag = document.getElementById('themeImport');
  var style = document.getElementById('style');
  var stylePath;
  var importPath;

  if(theme == "Green"){
     importPath = "../app-theme-green.html";
     stylePath ="app-theme-green";
  }else{
    importPath = "../app-theme-default.html";
    stylePath ="app-theme-default";
  }

  importTag.setAttribute('href', importPath);
  style.setAttribute('include', stylePath);
  //Load new file
});

HTML

<link id="themeImport" rel="import" href="../app-theme-green.html">

<template is="dom-bind" id="app">
    <style id="style" is="custom-style" include="app-theme-green"></style>
    // ... some content
</template>

这可能吗？

帮助将不胜感激:-)

Answer 1

我关注了this让它工作的答案，所以我改变了我的代码的几个部分。

我现在使用 .ccs 文件而不是使用 html dom 模块。

document.addEventListener('select-theme', function(e){
  console.log('select-theme: ', e.detail.themeValue)
  var theme = e.detail.themeValue;
  var importPath;

  if(theme == "Green"){
     importPath = "../app-theme-green.css";
  }else{
     importPath = "../app-theme-default.css";
  }

  var head  = document.getElementsByTagName('head')[0];
      var link  = document.createElement('link');
      link.rel  = 'stylesheet';
      link.type = 'text/css';
      link.href = importPath;
      link.media = 'all';
      head.appendChild(link);
});