While attempting to dynamically add styles to a stylesheet using JavaScript, an error message was encountered stating "Cannot read property 'length' of undefined"

Question

While attempting to dynamically add styles to a stylesheet using JavaScript, an error message was encountered stating "Cannot read property 'length' of undefined"

I am currently developing a custom polyfill that enables older browsers like Internet Explorer to interpret and run media queries using traditional CSS selectors. The process is outlined as follows:

Iterate through each stylesheet found in the document
Analyze each style rule within the stylesheet to identify media queries
Determine the targeted device size and apply the appropriate "id" accordingly
Add a CSS line dynamically with the selector to the existing stylesheet

The concept behind the polyfill is to search for media queries, assign a parent "id" to the body based on the device size, such as:

#tablet .wrap { ... }
#mobile .wrap { ... }
#desktop .wrap { ... }

Here is a snippet of the current JavaScript code:

var styleSheets = document.styleSheets;
// Remaining JavaScript code...

Everything is functioning correctly as intended, including adding the CSS rule to the stylesheet. However, I encounter an error at a certain point:

Uncaught TypeError: Cannot read property 'length' of undefined

The error occurs when calling this function:

addCSSRule( styleSheets[i], '#'+ className +' '+ ruleParts[0], rules[0], 1 );

I need to investigate why the aforementioned error is happening during the function call and when trying to read .length.

My HTML structure resembles the following layout:

<!DOCTYPE html>
<head>
<title>Style Manipulation VIA Javascript</title>

<link rel="stylesheet" href="css/test.css" />
<link rel="stylesheet" href="css/typo.css" />

</head>
<body>

<div class="wrap">
    <p>Lorem ipsum dolor sit amet... </p>
    <p>Lorem ipsum dolor sit amet... </p>
</div>

In conclusion, I must uncover the cause of the inability to read the property length and resolve any issues within the addCSSRule function causing the error.

javascript css media-queries polyfills

Answer 1

Answer №1

Exploring the differences between IE and W3C implementations of the styleSheets object reveals interesting insights:

function getStyleRules() {
    var rule, rules;
    var sheet, sheets = document.styleSheets;
    var ruleCssText = ['Rules:','',]

    for (var i=0, iLen=sheets.length; i<iLen; i++) {
      sheet = sheets[i];

      // Retrieve rules using:
      //
      //        W3C model        IE model
      rules = sheet.cssRules || sheet.rules;

      for (var j=0, jLen=rules.length; j<jLen; j++) {
        rule = rules[j];

        // Both models provide access to selector information,
        // but there are case differences in IE so it's advisable to convert to lowercase
        alert('Selector: ' + rule.selectorText.toLowerCase());

        // Extracting rule text
        // W3C model - includes selector and rule
        if (rule.cssText) {
          ruleCssText.push(rule.cssText);

        // IE model - only contains rule without selector
        } else if (rule.style) {
          ruleCssText.push(rule.style.cssText.toLowerCase());
        }
      }
      alert(ruleCssText.join('\n'));
    }
}

Much documentation exists on MSDN regarding the IE model, although it may primarily focus on newer versions rather than older editions that possibly accommodate both models: styleSheet object, rule object

Additional resources include Opera's documentation: Dynamic style - manipulating CSS with JavaScript

Further useful information can be found at: The styleSheet object, The CSS Rule object.

When utilizing web resources, exercise caution, seek alternative references, and extensively test your code across various browsers, especially older ones.

Upon running the code:

> TypeError: styleSheets[i].rules is undefined
> 
> for( a = 0; a < styleSheets[i].rules.length; a++ ) {

The issue arises from mixing the IE (rules) and W3C (cssRules) models, hence it's more efficient to fetch the rules object once: -

  var sheetRules = styleSheets[i].rules || styleSheets[i].cssRules;
  for( a = 0; a < sheetRules.length; a++ ) {

Subsequently:

  if ( sheetRules[a].type == 4 ) {

Note that the IE model lacks a type property within the rules object (despite what MSDN implies), as this feature aligns with the W3C model implemented by IE 9 onwards.

Following that:

>     mediaPart = sheetRules[a].media[0].split(' and ');

Typically, media pertains to the sheet rather than individual rules, thus:

      // Possibly referring to multiple media parts?
      mediaPart = styleSheets[i].media;

Moreover, the IE model presents an empty string under its media property, though you can retrieve its content through:

styleSheets[0].cssText.replace(/\s+/g,' ').match(/@media.+}[^{]+}/)

.

>     // TypeError: mediaPart[1] is undefined
>     dimB = parseInt( mediaPart[1].replace(/[():A-Za-z$-]/g, "") );

This section seems to assume "and" exists within the rule. While specifics aren't provided, if your rules resemble:

@media screen, print { ... }

then media represents a list of media rules where media[0] corresponds to screen and media[1] correlates to print, necessitating iteration over these media rules.

These insights should suffice for now.

Answer 2

Exploring the differences between IE and W3C implementations of the styleSheets object reveals interesting insights:

function getStyleRules() {
    var rule, rules;
    var sheet, sheets = document.styleSheets;
    var ruleCssText = ['Rules:','',]

    for (var i=0, iLen=sheets.length; i<iLen; i++) {
      sheet = sheets[i];

      // Retrieve rules using:
      //
      //        W3C model        IE model
      rules = sheet.cssRules || sheet.rules;

      for (var j=0, jLen=rules.length; j<jLen; j++) {
        rule = rules[j];

        // Both models provide access to selector information,
        // but there are case differences in IE so it's advisable to convert to lowercase
        alert('Selector: ' + rule.selectorText.toLowerCase());

        // Extracting rule text
        // W3C model - includes selector and rule
        if (rule.cssText) {
          ruleCssText.push(rule.cssText);

        // IE model - only contains rule without selector
        } else if (rule.style) {
          ruleCssText.push(rule.style.cssText.toLowerCase());
        }
      }
      alert(ruleCssText.join('\n'));
    }
}

Much documentation exists on MSDN regarding the IE model, although it may primarily focus on newer versions rather than older editions that possibly accommodate both models: styleSheet object, rule object

Additional resources include Opera's documentation: Dynamic style - manipulating CSS with JavaScript

Further useful information can be found at: The styleSheet object, The CSS Rule object.

When utilizing web resources, exercise caution, seek alternative references, and extensively test your code across various browsers, especially older ones.

Upon running the code:

> TypeError: styleSheets[i].rules is undefined
> 
> for( a = 0; a < styleSheets[i].rules.length; a++ ) {

The issue arises from mixing the IE (rules) and W3C (cssRules) models, hence it's more efficient to fetch the rules object once: -

  var sheetRules = styleSheets[i].rules || styleSheets[i].cssRules;
  for( a = 0; a < sheetRules.length; a++ ) {

Subsequently:

  if ( sheetRules[a].type == 4 ) {

Note that the IE model lacks a type property within the rules object (despite what MSDN implies), as this feature aligns with the W3C model implemented by IE 9 onwards.

Following that:

>     mediaPart = sheetRules[a].media[0].split(' and ');

Typically, media pertains to the sheet rather than individual rules, thus:

      // Possibly referring to multiple media parts?
      mediaPart = styleSheets[i].media;

Moreover, the IE model presents an empty string under its media property, though you can retrieve its content through:

styleSheets[0].cssText.replace(/\s+/g,' ').match(/@media.+}[^{]+}/)

.

>     // TypeError: mediaPart[1] is undefined
>     dimB = parseInt( mediaPart[1].replace(/[():A-Za-z$-]/g, "") );

This section seems to assume "and" exists within the rule. While specifics aren't provided, if your rules resemble:

@media screen, print { ... }

then media represents a list of media rules where media[0] corresponds to screen and media[1] correlates to print, necessitating iteration over these media rules.

These insights should suffice for now.

While attempting to dynamically add styles to a stylesheet using JavaScript, an error message was encountered stating "Cannot read property 'length' of undefined"

Answer №1

Similar questions

Encountering a GET-error while trying to nest jQuery/json calls: Resolution Update

Send nodejs express static request over to secure https server

Issue with React.useEffect not functioning in Express application

Dragging objects on a map is done using jQuery and it causes them to bounce

Utilizing Three JS to add Gradient to external Models

Encountering a 'JSON parsing error' while transmitting data from Ajax to Django REST Framework

Is it advisable to use npm devDependencies in a production environment?

Tips for Avoiding Inheritance of a Specific Method

An error was encountered: Component.setState is undefined and cannot be read, leading to a TypeError

What is the reason behind changing the line-height for one inline-block sibling div affecting both divs?

Inside nested ng-transclude, the AngularJS directive isolates the scope

When I test my jQuery scripts in jsfiddle, they run smoothly. However, they do not seem to work properly when I

NodeJs Classes TypeError: Unable to access 'name' property as it is undefined

Animate div visibility with CSS transitions and Javascript

JSON parsing successfully but failing to deliver expected results

Rendering a page for a missing resource

Adjust the values of a specific field in every document by referencing another field within the same document

The error message "element.getAttribute is not defined" is common when using the Perfect

Angular/Karma Unit Test for HttpClient

Using pre-set values for filters in a mongo selector: best practices