如何从标题部分中删除样式标签答案

【问题标题】：how to remove the style tags from the header section如何从标题部分中删除样式标签
【发布时间】：2017-04-27 06:13:37
【问题描述】：

我正在使用 Angular js 并部署了一个网站，在我网站的头部，控制台中有很多样式标签，如下图所示，我附上了我网站控制台的快照。我不知道这些标签来自哪里以及如何从网站头部删除这些样式标签

【问题讨论】：

您能否分享您的代码，以便我们调试从图像中很难理解样式标签是如何生成的。请提供Minimal, Complete, Verifiable Example 而不仅仅是图片。
您可以尝试我的回答中提供的解决方案。我希望它会按照您的期望工作。

标签： javascript html angularjs minify meta-tags

【解决方案1】：

据我了解，您使用的是Angular Material Design，它负责在您的head 部分添加style 标签。这一切都发生在幕后，您可以关注this link 了解更多信息。我认为您无需担心删除此样式标签，因为它是功能性的。 Angular Material Design 动态注入此 style 标签用于主题化。

参考：https://material.angularjs.org/latest/Theming/05_under_the_hood

谢谢。

编辑

如果你不想默认生成主题，那么你可以使用

$mdThemingProvider.generateThemesOnDemand(true);

示例：

    angular.module('myApp', ['ngMaterial'])
    .config(function($mdThemingProvider, $provide) {
      //disable theme generation
      $mdThemingProvider.generateThemesOnDemand(true);
      $provide.value('themeProvider', $mdThemingProvider);

    })
    .run(['themeProvider', '$mdTheming', function(themeProvider, $mdTheming) {
      //create new theme
      themeProvider.theme('default')
      .primaryPalette('pink')
      .accentPalette('orange')
      .backgroundPalette('yellow');

      //reload the theme
      $mdTheming.generateTheme('default');

      //optional - set the default to this new theme
      themeProvider.setDefaultTheme('default');
    }]);

参考：https://material.angularjs.org/latest/Theming/04_multiple_themes

【讨论】：

我在head 部分看到了一些使用棱角材料的网站，没有像我的网站这样的样式标签，我想将它们隐藏在我的head 部分@Arpit Meena
当我们像你提到的那样使用上面的代码时，我的整个网站主题改变了所有颜色都改变了@Arpit Meena
@Midhunsai，您需要多个主题吗？或者你想要一个单一的网站主题？
单一主题，即默认材料@Arpit Meena
@Midhunsai 我已经更新了答案，请检查并告诉我它是否适合您。

【解决方案2】：

如果要删除所有样式标签：

var st = document.getElementsByTagName('style');

并添加一个循环来删除所有这些。

for(i = 0 ; i < st.length ; i++){

    st[i].parentNode.removeChild(st[i]);

}

【讨论】：

我可以知道这些样式标签在部署时出现在标题中的原因@Bhansa
你应该检查你的代码，无论你生成它们检查你的 html 文件。
如果我编写了内联样式，那么这些样式标签会出现在标题中吗？ @Bhansa
@Midhunsai 它们已经在标题中，但如果它们是内联的，它们不会引起您的关注。
我已将您的代码放在我的标头控制器中，是否放置您的代码以删除样式标签的正确位置？ @Bhansa

【解决方案3】：

请尝试下面的 JQuery 代码

$('style[md-theme-style]').remove();

【讨论】：

嗯，这是“回答问题”的一种方式。那样式实际影响的元素呢？

【解决方案4】：

原因：

Angular-material 包含一些默认的theme css 作为常量变量。

您可以查看here(angular-material.js)。

当我们在浏览器中加载这个库时，它会动态地将大量 style tags 添加到页面的 <HEAD> 部分。

如何禁用？

您可以覆盖constans。这将导致组件上不添加主题类。

angular(myApp, [ ngMaterial, myAppModules ]).constant("$MD_THEME_CSS","");

您也可以查看angular-material.js。图书馆本身也提出了这种解决方案。

【讨论】：

【解决方案5】：

您之前是否尝试过禁用主题生成，然后启用您想要的主题生成？

angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
  //disable theme generation
  $mdThemingProvider.generateThemesOnDemand(true);

  //themes are still defined in config, but the css is not generated
  $mdThemingProvider.theme('altTheme')

.primaryPalette('紫色') .accentPalette('绿色');

//生成名为altTheme的预定义主题 $mdTheming.generateTheme('altTheme'); });

【讨论】：

【解决方案6】：

当 material.js 加载到您的浏览器中时，这会动态地将大量 css 样式标签添加到页面文档中。要禁用它们，您需要使用以下命令自己重新编译 angular-material：

git clone https://github.com/angular/material.git

然后安装依赖：

cd material
npm install

然后转到 gulp/util.js 并将第 53 行更改为：

var jsProcess = series(jsBuildStream, themeBuildStream() )

成为：

var jsProcess = series(jsBuildStream)

然后运行构建过程：

gulp build

【讨论】：

我正在使用 grunt 而不是 gulp @MehulJoshi
这与您的构建系统无关，您必须转到节点模块目录，然后必须对材料进行更改，然后您必须再次构建，以反映更改。为此，您必须安装 gulp。