Question

我正在尝试创建一个函数，该函数同时检查文档中是否存在指向特定CSS样式表的链接，和/或（如果不存在）创建该链接并返回该链接的样式表的Javascript对象：< / p>

(function(doc) {
  const sheets = doc.styleSheets;
  const newSheet_path = location.origin + '/newSheet.css';

  const newSheet = sheets => {
    let sheetExists;
    for(let sheet in sheets) {
      if(sheets[sheet].href === newSheet_path) {
        sheetExists = sheets[sheet];
      }
    }

    if(!sheetExists) {
      let addSheet = doc.createElement('link');
      addSheet.setAttribute('rel', 'stylesheet');
      addSheet.setAttribute('href', 'newSheet.css');
      doc.head.appendChild(addSheet);
      return addSheet;
    } else {
      return sheetExists;
    }
  }
  console.log(newSheet(sheets));
}(window.document));

使用此代码，如果工作表不存在，它将返回link元素，这是有道理的，但是我需要与之关联的Javascript对象。我已经尝试用以下内容替换addSheet返回语句：

return Array.from(sheets).pop();

它将仅返回新表之前的任何现有表，还有这个：

return Array.from(sheets).find((s,i,S) => S[i].href === newSheet_path);

但是又回到undefined。如果我猜对了，那是因为sheets被定义为在添加新样式之前的样式表列表，因此，变量不会在包含新样式的情况下重新定义。我试图在return语句之前重新定义它-

sheets = doc.styleSheets;
return Array.from(sheets).pop();

-但无济于事。这可能是我想要完成的吗？还是我必须将这个过程分解为多个功能？

Answer 1

如果我猜对了，那是因为在添加新样式表之前，工作表已被定义为样式表的列表，因此，不会在包含新工作表的情况下重新定义变量。

不。 const sheets = doc.styleSheets;只是为sheets分配doc.styleSheets中的值，该值是对浏览器样式表列表的引用。 sheets没有获得该列表的副本。

我怀疑您没有看到它的原因是尚未加载样式表。在文档中添加link元素开始该过程，但是该过程尚未完成。

如果需要StyleSheet实例，则需要处理加载样式表的异步性质-通过让函数接受回调或返回promise等。

Javascript-检查样式表是否存在，如果不存在，则全部添加在一条语句中

1 个答案: