Javascript - 检查样式表是否存在,如果不存在则添加,在一个语句中?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (148)

我试图创建一个函数,同时检查文档中是否存在指向某个CSS样式表的链接,和/或如果不存在,则创建链接并返回该链接样式表的Javascript对象:

(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语句:

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

只返回新表单之前的任何现有表单,还有:

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

但是回来了undefined。如果我正确猜测,那是因为在添加新sheets样式之前定义为样式表列表,因此,变量不会在包含新表单的情况下重新定义。我试着在退货声明之前重新定义它 -

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

- 但无济于事。这有可能,我想要完成什么?或者我是否必须将此过程分解为多个功能?

提问于
用户回答回答于

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

const sheets = doc.styleSheets;只是分配sheetsdoc.styleSheets,这是对浏览器样式表列表的引用。sheets没有获得该列表的副本

我怀疑你没有看到它的原因是样式表尚未加载。向link文档添加元素将启动该过程,但该过程尚未完成。

如果你需要StyleSheet实例,你需要处理加载样式表的异步性质 - 让你的函数接受回调,或者返回一个promise等。

扫码关注云+社区

领取腾讯云代金券