Home/ Questions/Q 6640849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T23:43:13+00:00

I want to be able to remove/change the internal style sheets values through JavasScript.

  • 0

I want to be able to remove/change the internal style sheets values through JavasScript. It has to be through JS because I cannot edit the html since I am using an application that does not allow me to, but I can use JS. How can I change the value for the background or remove it completely? Or is there another way to accomplish this? 

<body>
<head>
  <style type="text/css">
  #company-header{background:#000 !important;}
  </style>
</head>

<div id="company-header"></div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If your just going to change small bits of css, using jQuery’s css() is your best option, but it does not always recognize !important, for that you would probably need cssText, like this:

    $('#id').css('cssText', 'height: 200px !important');

    This replaces all the css, so everything needs to be defined in the new css rules that are added.

    If you are changing a lot of css, or just want to make it easier for the next time, you could remove all inline css and add an external stylesheet instead.

    To remove all inline styles you would do something like this:

    $(document).removeAttr('style');

    or for div’s only

    $('div').removeAttr('style');

    Depending on how many styles there are, this could take som time to process.

    Then to add a new stylesheet do:

    (function() {
    var myCSS = document.createElement('link');
    myCSS.rel = 'stylesheet';
    myCSS.type = 'text/css';
    myCSS.src = '/styles/mystylesheet.css';
    var place = document.getElementsByTagName('script')[0];
    place.parentNode.insertBefore(myCSS, place);
})();

    Edit:

    function removeCSS() {
    var badCSS = document.getElementsByTagName('style')[0];
        $(badCSS).remove();     
});

    This will remove all the markup in the internal stylesheet, but since the styles are already loaded it will make absolutely no difference.

    Internal styles will always override external styles, but for one exeption, if the external style is !important. If both the external and internal styles are !important, the internal style will be used.

    Loading an external stylesheet dynamicly with javascript will only work if everything you are trying to override is set to !important in the external stylesheet, and not set to !important in the internal stylesheet.

    Changing the styles directly in the DOM with jQuery’s css() and using the cssText option to override the !important set in the internal stylesheet may be your only viable option if there is absolutely no way to alter the html file and remove the internal stylesheet.

    • 0