admin管理员组

文章数量:1222413

I am using angular js and deployed a site, In the head part of my website there are a lot of style tags are coming in the console like the below image, I attached a snap of my website console. I don't know where those tags are coming from and how can I remove those style tags from the head of the website

I am using angular js and deployed a site, In the head part of my website there are a lot of style tags are coming in the console like the below image, I attached a snap of my website console. I don't know where those tags are coming from and how can I remove those style tags from the head of the website

  • javascript
  • html
  • angularjs
  • minify
  • meta-tags
Share Improve this question edited May 2, 2017 at 13:13 derM 13.7k5 gold badges58 silver badges97 bronze badges asked Apr 27, 2017 at 6:13 MidhunsaiMidhunsai 4278 silver badges27 bronze badges 2
  • Can you please share your code, so we can debug it's hard to understand from an image how the style tags are getting generated. Please provide Minimal, Complete, Verifiable Example not just the image. – bhansa Commented May 2, 2017 at 17:58
  • You can try the solution provided in my answer. I hope it will work as per your expectation. – Rohìt Jíndal Commented May 4, 2017 at 8:13
Add a comment  | 

6 Answers 6

Reset to default 5 +25

As of my understanding, you are using Angular Material Design and it is responsible for adding the style tags in your head section. It all happens under the hood, you can follow this link to know more. I think you no need to worry about removing this style tags and all because it came as functionality. Angular Material Design dynamically inject this style tags for theming purpose.

Reference: https://material.angularjs.org/latest/Theming/05_under_the_hood

Thank you.

EDIT

If you don't want to generate themes by default then you can use

$mdThemingProvider.generateThemesOnDemand(true);

Example:

    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');
    }]);

Reference: https://material.angularjs.org/latest/Theming/04_multiple_themes

If you want to remove all the style tags :

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

and add a loop to remove all of them.

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

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

}

Please Try with below JQuery code

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

Reason :

Angular-material includes some default theme css as a constant variable.

You can check here(angular-material.js).

When we load this library in the browser it adds lots of style tags dynamically into the <HEAD> section of the Page.

How to disable ?

You can override the constans.It will result in not adding theme classes on components.

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

You can also look into the angular-material.js. This solution is also proposed in library itself.

Have you tried to disable theme generation before and then enable the one you want?

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('purple') .accentPalette('green');

//generate the predefined theme named altTheme $mdTheming.generateTheme('altTheme'); });

When material.js loads into your browser this adds lots of css style tags dynamically to the page document. To disable them you will need to recompile angular-material yourself using the following commands:

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

Then install dependancies:

cd material
npm install

Then go to gulp/util.js and change line 53 from:

var jsProcess = series(jsBuildStream, themeBuildStream() )

to be:

var jsProcess = series(jsBuildStream)

Then run the build process:

gulp build

本文标签： javascripthow to remove the style tags from the header sectionStack Overflow

版权声明：本文标题：javascript - how to remove the style tags from the header section - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1739386609a2160962.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。