We have a style node which we would like to write within the HTML document but, which we wouldn't like to be handled... just to keep for further use, The reason we do not use just a hidden node is because we want to preserve syntax highlighting while Dev.

In Javascript this can be done by changing the type attribute

for example:

<script type="gzip/text"></script>

would cause the script not to be executed...

is it possible to do the same on style nodes?

We have a style node which we would like to write within the HTML document but, which we wouldn't like to be handled... just to keep for further use, The reason we do not use just a hidden node is because we want to preserve syntax highlighting while Dev.

In Javascript this can be done by changing the type attribute

for example:

<script type="gzip/text"></script>

would cause the script not to be executed...

is it possible to do the same on style nodes?

• javascript
• html
• css

• use this code <style> /*css code here*/ </style> – Mohit Gupta Commented Jan 30, 2019 at 12:37
• Yeah or rename <style> to something else like <stylez> and it will cause the CSS inside to be inactive – Jeremy Thille Commented Jan 30, 2019 at 12:51

5 Answers 5

You can enable/disable a style element, using the media attribute.

By setting it to a value that will not match any device, you are actually disabling it.

<style media="max-width: 1px">
   /* Nothing contained in this styles element will be applied */
</style>

By dynamically setting and removing this attribute and its value, you can emulate the enabled/disabled behavior, as in the following example:

document.getElementById('but').addEventListener('click', function toggle(){
  let styleEl = document.getElementById('styles')
  // toggle enabled/disabled
  if(styleEl.hasAttribute('media')) styleEl.removeAttribute('media')
  else styleEl.setAttribute('media', "max-width: 1px")
})

<style id="styles" media="max-width: 1px">
   div { color: red }
</style>

<div id="but">Click me</div>

You could also disable it by changing type to text.

se here is an example

function toggle(item){
   if (typeof item  === "string")// its an id 
     item = document.getElementById(item);
   if (item.getAttribute("type") == "text")
       item.removeAttribute("type");
   else item.setAttribute("type", "text"); // this will disable it 
}

<style id="styleOne">
.active{
color:red;
}
</style>


<p onclick="toggle('styleOne')" class="active">Toggle Style</p>

You can set the disabled property in JavaScript. If set to true, the CSS rules in the element will not be applied.

function toggleEnabled(stylesheet){
    stylesheet.disabled = !stylesheet.disabled;
}

Demo:

function toggleEnabled(stylesheet){
    stylesheet.disabled = !stylesheet.disabled;
}
document.querySelector('button').addEventListener('click', function(e){
  toggleEnabled(document.getElementById('myStyles'));
});

<style id="myStyles">
body {
  background-color: dodgerblue;
}
</style>
<button>Toggle Stylesheet</button>

Some improvements to @Alen.Toma's answer

function toggleStyleById(id, turn = ""){
    item = document.querySelector("style#" + id);

    if (turn == "on") {
        item.removeAttribute("type");
        
    } else if (turn == "off") {
        item.setAttribute("type", "text");
        
    } else if (turn == "") { //Toggle
        if (item.getAttribute("type") == "text") //It's off
            item.removeAttribute("type");
            
        else //doesn't have type attrib, or its type is "text/css"
            item.setAttribute("type", "text");
    }
}

You can enable/disable a style element, using the media attribute. By setting it to a value that will not match any device, you are actually disabling it. You could also disable it by changing the type to text. You can set the disabled property in JavaScript