Adding a disabled internal Style node to the HTML5 DOM: A simple guide

Question

Adding a disabled internal Style node to the HTML5 DOM: A simple guide

According to this, the style tag can be turned off using the disabled attribute. I attempted the following:

<head>
    <style>body { color: black; }</style>
    <style disabled>body {color: red; }</style>
</head>
<body>
    Hello World !!
</body>

Both Chrome and Firefox ignore the disabled attribute and display the text in red. However, IE 11 correctly displays it in black.

Query: How can internal style nodes be added in a disabled state using JavaScript?

Background: I am dynamically loading CSS file content as a style node for processing rules with document.styleSheets.cssRules. I want to prevent the temporary loaded style from affecting the current page styles.

Although setting document.styleSheets[].disabled works, there is a delay between node insertion and being disabled.

I experimented with using

new DOMParser().parseFromString(cssFileContent, "text/html")

, which successfully loads the HTML content invisibly, but fails to initialize the document.styleSheets.

javascript css html

Answer 1

Answer №1

Instructions for incorporating internal style nodes in a disabled state using JavaScript

The HTMLStyleElement interface includes a disabled flag that can be utilized as follows:

var style = document.createElement("style");
// ...usual style stuff...
style.disabled = true;
document.querySelector("head").appendChild(style);

If a browser does not support disabled style elements, it may not have any impact. However, this should not result in an error, as browsers without the disabled element will handle it like an "expando" property.

Context: I am dynamically loading content from a CSS file as a style node to process rules with document.styleSheets.cssRules. I aim to prevent interference with the current page styles by this temporary loaded style.

In light of the issues related to disabled style elements, you could consider using a hidden iframe instead: (live example)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
<p>This text should be black.</p>
</script>
<script>
var iframe = document.createElement('iframe');
iframe.style.display = "none";
var html = "<html><head><style>body { color: red; }</style></head><body></body></html>";
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();
document.body.insertAdjacentHTML(
  "beforeend",
  "First rule: " + iframe.contentDocument.styleSheets[0].cssRules[0].cssText
);
</script>
</body>
</html>

Output:

This text should be black.

First rule: body { color: red; }

The text appears in black, rather than red.

(Acknowledgment to mschr for providing the code to reliably add the iframe with inline HTML across different browsers.)

Answer 2

Instructions for incorporating internal style nodes in a disabled state using JavaScript

The HTMLStyleElement interface includes a disabled flag that can be utilized as follows:

var style = document.createElement("style");
// ...usual style stuff...
style.disabled = true;
document.querySelector("head").appendChild(style);

If a browser does not support disabled style elements, it may not have any impact. However, this should not result in an error, as browsers without the disabled element will handle it like an "expando" property.

Context: I am dynamically loading content from a CSS file as a style node to process rules with document.styleSheets.cssRules. I aim to prevent interference with the current page styles by this temporary loaded style.

In light of the issues related to disabled style elements, you could consider using a hidden iframe instead: (live example)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
<p>This text should be black.</p>
</script>
<script>
var iframe = document.createElement('iframe');
iframe.style.display = "none";
var html = "<html><head><style>body { color: red; }</style></head><body></body></html>";
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();
document.body.insertAdjacentHTML(
  "beforeend",
  "First rule: " + iframe.contentDocument.styleSheets[0].cssRules[0].cssText
);
</script>
</body>
</html>

Output:

This text should be black.

First rule: body { color: red; }

The text appears in black, rather than red.

(Acknowledgment to mschr for providing the code to reliably add the iframe with inline HTML across different browsers.)

Adding a disabled internal Style node to the HTML5 DOM: A simple guide

Answer №1

Similar questions

Unlock the power of nested dynamic content creation with JavaScript

Voice crashes in Discord.js after the audio has been playing for a short while

AngularJS directive does not trigger when switching tabs or scrolling pages

Filtering out strings of a certain length from an array in JavaScript

What could be the reason my dropdown menu is not appearing on hover?

HTML and JavaScript: Struggling to include multiple parameters in onclick event even after escaping quotes

Can you please explain the distinction between angular.equals and _.isEqual?

Should you opt for returning [something] or (nothing) in Javascript with ExpressJS?

Exploring the world of jQuery waypoints and the art of modifying

What is the best method for iterating through an array and generating a glossary list organized by categories?

Grabbing an AJAX Request

Leverage the power of Angular CLI within your current project

Another option could be to either find a different solution or to pause the loop until the

Printing content from an Angular dashboard can be achieved by following a few

The React.js project I created is showcased on GitHub pages and has a sleek black design

Implement a dropdown menu in Vue.js using data fetched from an ajax request

What is the best way to denote arrays in ember-data models?

Toggle the visibility of a div based on whether or not certain fields have been filled

modify rectangular section in drupal rather than numerical block

Converting keyValue format into an Array in Angular using Typescript