Javascript -检查样式表是否存在，如果不存在则添加，在一条语句中完成所有操作
Javascript -检查样式表是否存在，如果不存在则添加，在一条语句中完成所有操作
提问于 2018-09-23 01:20:30
我正在尝试创建一个函数，同时检查文档中是否存在指向某个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 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();--但是没有用。这是可能的吗?这是我想要实现的吗？或者我必须将这个过程分解成多个函数？
回答 1
Stack Overflow用户
发布于 2018-09-23 01:31:45
如果我没猜错的话，这是因为在添加新的样式表前，sheets被定义为样式表列表，因此，变量不会被包含在新的sheet中重新定义。
不是的。const sheets = doc.styleSheets;只是将doc.styleSheets中的值赋给sheets，这是对浏览器的样式表列表的引用。sheets没有得到该列表的副本。
我怀疑您没有看到它的原因是样式表还没有加载。向文档添加link元素将启动该过程，但该过程尚未完成。
如果需要StyleSheet实例，则需要处理加载样式表的异步特性-通过让函数接受回调，或返回promise，等等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52459072
复制相关文章
相似问题