Javascript 如何读取加载在html页面中的css文件名

我们正在创建一个新的小部件，因为我们正在实现一个功能，它告诉我们html页面中包含多少css文件

我们需要页面中使用的css文件的数量，以及css文件的名称

我对angular有点陌生，我听说这可以通过指令实现，但不知道如何实现

---

需要你们的帮助。提前感谢。

您的应用程序是否已经在运行中？此jQuery代码可以轻松完成此任务：

var cssList = []
$('head link[type="text/css"]').each(function(){
    cssList.push($(this).attr("href"));
});
console.log("List of files:" + cssList.join());
console.log("Number of files:" + cssList.length);

---

不使用外部库，您可以这样做：

var links = document.querySelectorAll('link');
var linksAsArray = Array.prototype.slice.call(links, 0);
var cssLinks = linksAsArray.filter(function(l){return l.type === 'text/css';});
var cssNames = cssLinks.map(function(c){return c.href;});
var count = cssNames.length;
console.log("css count and names:", count, cssNames);

使用角度：

  .directive('cssCounter', ['$document', function($document) {

    function cssFilter(l) {
      return l.type === 'text/css' || l.rel === 'stylesheet';
    }

    function link(scope, element, attrs) {

      var links = $document[0].querySelectorAll('link');
      var linksAsArray = Array.prototype.slice.call(links, 0);
      var cssLinks = linksAsArray.filter(cssFilter);
      var cssNames = cssLinks.map(function(c) {
        return c.href;
      });


      scope.cssFiles = cssNames;
    }

    return {
      link: link,
      template: '<p>CSS count: {{cssFiles.length}}<ul><li ng-repeat="c in cssFiles">{{c}}</li></ul></p>'
    };
  }]);

.directive（'cssconter'，['$document'，函数（$document）{
函数cssFilter（l）{
返回l.type=='text/css'| | l.rel==='stylesheet'；
}
功能链接（范围、元素、属性）{
var links=$document[0]。querySelectorAll（'link'）；
var linksasasarray=Array.prototype.slice.call（links，0）；
var cssLinks=linksasrarray.filter（cssFilter）；
var cssNames=cssLinks.map（函数（c）{
返回c.href；
});
scope.cssFiles=cssNames；
}
返回{
链接：链接，
模板：'CSS计数：{{cssFiles.length}}
{{c}
'
};
}]);

---

示例plunker可以在这里找到：

谢谢你的回答，但我需要用angular js实现，让我知道如何将上面的内容转换成angular js谢谢你的回答，但正如我在问题中提到的，我们希望用angular而不是jQuery实现。我们可以用指令的方式来编写代码吗？指令通常是一个UI组件。。。您应该改用服务。Angular有jqLite，因此您可以使用相同的代码，而无需导入jQuery请参见：您好Lucas Rodrigues！我刚参加复习。不幸的是，我不得不拒绝。像“谢谢”或“你好”这样的东西被认为是噪音，应该从帖子中删除，而不是添加到帖子中。如果你感兴趣，相关的讨论是。这比我得到的要好。你能检查一下我哪里错了吗@卢卡斯·罗德里格斯：你应该提出一个新问题。然而，在您的指令中，您正在查找

type=“text/css”

，但在html中，您指定了

rel=“stylesheet”

。哦，这就是为什么我得到了一个空数组！Plunkr为我进口了这些，我没有注意到这一点。谢谢