javascript - how to remove the style tags from the header section

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

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 Midhunsai 4278 silver badges27 bronze badges

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

Sorted by: 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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - how to remove the style tags from the header section - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)