Accessing class properties from JavaScript code

Question

Accessing class properties from JavaScript code

Can you retrieve the class values of a style element using Vue's script section?

For example:

.node-output02 {
    bottom: #{-2+$portSize/-2}px;
    left: #{$nodeWidth/3}px;
  }

In the script, I'd like to achieve:

const left = .node-output02.left

javascript vue.js

Answer 1

Answer №1

This seems to be more of a JavaScript issue rather than a Vue specific problem.

If you use this code snippet (which helps in extracting CSS text from a stylesheet), you can convert the CSS into an object that can be queried.

While it may not cover all scenarios, it can serve as a good starting point.

console.log('left =', getStyleObject('.node-output02')['left']); // 420px

function getStyleText(className) {
  let classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules,
      styleText = '';
  Array.from(classes).forEach(clazz => {
    if (clazz.selectorText == className) {
      styleText += clazz.cssText || clazz.style.cssText;
    }
  });
  return styleText;
}

function getStyleObject(className) {
  let styleText = getStyleText(className);
  if (styleText.length > 0) {
    let leftBraceIndex = styleText.indexOf('{'),
        rightBraceIndex = styleText.lastIndexOf('}'),
        selector = styleText.substring(0, leftBraceIndex).trim(),
        ruleText = styleText.substring(leftBraceIndex + 1, rightBraceIndex).trim();
    return Object.fromEntries(ruleText.split(/\s*;\s*/g)
      .filter(v => v.length > 0) 
      .map(v => v.split(/\s*:\s*/g)));
  }
  return null;
}

.node-output02 {
  bottom: 360px;
  left: 420px;
}

Handling Multiple Style Rules...

In the following example, styles are combined top to bottom, but the `!important` flag is ignored. Using a reducer function might be a better approach.

console.log('left =', getStyleObject('.node-output02')['left']); // 100%;

function getStyleText(className) {
  let classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules,
      styles = [];
  Array.from(classes).forEach(clazz => {
    if (clazz.selectorText == className) {
      let styleText = clazz.cssText || clazz.style.cssText,
          leftBraceIndex = styleText.indexOf('{'),
          rightBraceIndex = styleText.lastIndexOf('}'),
          selector = styleText.substring(0, leftBraceIndex).trim(),
          ruleText = styleText.substring(leftBraceIndex + 1, rightBraceIndex).trim();
      styles.push(ruleText);
    }
  });
  return styles;
}

function getStyleObject(className) {
  return Object.assign.apply({}, getStyleText(className).map(ruleText => {
    return Object.fromEntries(ruleText.split(/\s*;\s*/g)
      .filter(v => v.length > 0)
      .map(v => v.split(/\s*:\s*/g)));
  }));
}

.node-output02 {
  bottom: 360px;
  left: 420px;
}

.node-output02 {
  left: 5em !important; /* This should take precedence... */
}

.node-output02 {
  left: 100%; /* This will be the final value returned. */
}

Using Reducer Function

If maintaining priority is important, you can handle exceptions with `!important`. However, this method does not guarantee specificity of selectors. Still, it provides a more robust solution compared to the previous code.

console.log('left =', getStyleObject('.node-output02')['left']); // 5em

function getStyleText(className) {
  let classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules,
      styles = [];
  Array.from(classes).forEach(clazz => {
    if (clazz.selectorText == className) {
      let styleText = clazz.cssText || clazz.style.cssText,
          leftBraceIndex = styleText.indexOf('{'),
          rightBraceIndex = styleText.lastIndexOf('}'),
          selector = styleText.substring(0, leftBraceIndex).trim(),
          ruleText = styleText.substring(leftBraceIndex + 1, rightBraceIndex).trim();
      styles.push(ruleText);
    }
  });
  return styles;
}

function getStyleObject(className) {
  return cleanupValues(getStyleText(className).reduce((result, ruleText) => {
    let css = parseRuleText(ruleText);
    for (let [prop, value] of Object.entries(css)) {
      if (result.hasOwnProperty(prop) &&
          result[prop].includes('!important') &&
          !value.includes('!important')) {
        continue; 
      }
      result[prop] = value;
    }
    return result;
  }, {}));
}

function parseRuleText(ruleText) {
  return Object.fromEntries(ruleText.split(/\s*;\s*/g)
    .filter(v => v.length > 0)
    .map(v => v.split(/\s*:\s*/g)));
}

function cleanupValues(css) {
  for (let [prop, value] of Object.entries(css)) {
    if (value.includes('!important')) {
      css[prop] = value.replace(/\s*!important/, '');
    }
  }
  return css;
}

.node-output02 {
  bottom: 360px;
  left: 420px;
}

.node-output02 {
  left: 5em !important; /* This value takes priority. */
}

.node-output02 {
  left: 100%; /* Less significant compared to the earlier rule. */
}

Answer 2

This seems to be more of a JavaScript issue rather than a Vue specific problem.

If you use this code snippet (which helps in extracting CSS text from a stylesheet), you can convert the CSS into an object that can be queried.

While it may not cover all scenarios, it can serve as a good starting point.

console.log('left =', getStyleObject('.node-output02')['left']); // 420px

function getStyleText(className) {
  let classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules,
      styleText = '';
  Array.from(classes).forEach(clazz => {
    if (clazz.selectorText == className) {
      styleText += clazz.cssText || clazz.style.cssText;
    }
  });
  return styleText;
}

function getStyleObject(className) {
  let styleText = getStyleText(className);
  if (styleText.length > 0) {
    let leftBraceIndex = styleText.indexOf('{'),
        rightBraceIndex = styleText.lastIndexOf('}'),
        selector = styleText.substring(0, leftBraceIndex).trim(),
        ruleText = styleText.substring(leftBraceIndex + 1, rightBraceIndex).trim();
    return Object.fromEntries(ruleText.split(/\s*;\s*/g)
      .filter(v => v.length > 0) 
      .map(v => v.split(/\s*:\s*/g)));
  }
  return null;
}

.node-output02 {
  bottom: 360px;
  left: 420px;
}

Handling Multiple Style Rules...

In the following example, styles are combined top to bottom, but the `!important` flag is ignored. Using a reducer function might be a better approach.

console.log('left =', getStyleObject('.node-output02')['left']); // 100%;

function getStyleText(className) {
  let classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules,
      styles = [];
  Array.from(classes).forEach(clazz => {
    if (clazz.selectorText == className) {
      let styleText = clazz.cssText || clazz.style.cssText,
          leftBraceIndex = styleText.indexOf('{'),
          rightBraceIndex = styleText.lastIndexOf('}'),
          selector = styleText.substring(0, leftBraceIndex).trim(),
          ruleText = styleText.substring(leftBraceIndex + 1, rightBraceIndex).trim();
      styles.push(ruleText);
    }
  });
  return styles;
}

function getStyleObject(className) {
  return Object.assign.apply({}, getStyleText(className).map(ruleText => {
    return Object.fromEntries(ruleText.split(/\s*;\s*/g)
      .filter(v => v.length > 0)
      .map(v => v.split(/\s*:\s*/g)));
  }));
}

.node-output02 {
  bottom: 360px;
  left: 420px;
}

.node-output02 {
  left: 5em !important; /* This should take precedence... */
}

.node-output02 {
  left: 100%; /* This will be the final value returned. */
}

Using Reducer Function

If maintaining priority is important, you can handle exceptions with `!important`. However, this method does not guarantee specificity of selectors. Still, it provides a more robust solution compared to the previous code.

console.log('left =', getStyleObject('.node-output02')['left']); // 5em

function getStyleText(className) {
  let classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules,
      styles = [];
  Array.from(classes).forEach(clazz => {
    if (clazz.selectorText == className) {
      let styleText = clazz.cssText || clazz.style.cssText,
          leftBraceIndex = styleText.indexOf('{'),
          rightBraceIndex = styleText.lastIndexOf('}'),
          selector = styleText.substring(0, leftBraceIndex).trim(),
          ruleText = styleText.substring(leftBraceIndex + 1, rightBraceIndex).trim();
      styles.push(ruleText);
    }
  });
  return styles;
}

function getStyleObject(className) {
  return cleanupValues(getStyleText(className).reduce((result, ruleText) => {
    let css = parseRuleText(ruleText);
    for (let [prop, value] of Object.entries(css)) {
      if (result.hasOwnProperty(prop) &&
          result[prop].includes('!important') &&
          !value.includes('!important')) {
        continue; 
      }
      result[prop] = value;
    }
    return result;
  }, {}));
}

function parseRuleText(ruleText) {
  return Object.fromEntries(ruleText.split(/\s*;\s*/g)
    .filter(v => v.length > 0)
    .map(v => v.split(/\s*:\s*/g)));
}

function cleanupValues(css) {
  for (let [prop, value] of Object.entries(css)) {
    if (value.includes('!important')) {
      css[prop] = value.replace(/\s*!important/, '');
    }
  }
  return css;
}

.node-output02 {
  bottom: 360px;
  left: 420px;
}

.node-output02 {
  left: 5em !important; /* This value takes priority. */
}

.node-output02 {
  left: 100%; /* Less significant compared to the earlier rule. */
}

Accessing class properties from JavaScript code

Answer №1

Handling Multiple Style Rules...

Using Reducer Function

Similar questions

Arrangement of elements in MongoDB

Chosen Dropdown selection - Retrieve/Receive information

Analyze a designated section and display the top 3 frequently used words

AJAX - Alert with a beep sound each time a new entry is inserted into the database table

Customizing the appearance of the Bootstrap Typeahead

The mystery behind the enigmatic combination of ajax, JQuery,

How do I avoid this error while using a for loop with Axios and JSON?

What are the steps to create a custom progress bar using JavaScript?

Creating a JavaScript function that increments or decrements a variable based on keyboard input is a useful feature

Ionic 2's Navigation Feature Failing to Function

Strategies for showcasing a dynamic date selection tool

Determining if a user is already logged in from a different device using express-session

Animating a 3D object's movement using Gsap.js

Issues are arising with the for loop in an express node js app using ejs, as it is not displaying the intended data and

Manipulate the text within a canvas element using JavaScript

Exploring every conceivable method for accessing a file from a distant server

Vue component fails to render on a specific route

In React, what is the correct term for "selection boxes" when choosing multiple items in Finder?

Navigating forwards in Angular 7 causes loss of state

The personalized confirmation dialog is experiencing malfunctions