"Utilize the style attribute to modify the appearance based on the

Question

"Utilize the style attribute to modify the appearance based on the

I was the original asker of this question, but I failed to provide a clear description which led to not getting an answer. However, I will now explain everything here. Essentially, I am looking for a JavaScript function that can identify a class with a specific prefix on any element within the entire document. Let's consider the following HTML markup as an example:

 <body class="c:bg-#008eff">
  <h1 class="c:bg-#ff5c5c">Hello, <span class="c:bg-white">World !</span></h1>

In the above example, we have a common prefix c:bg- in all the classes. I envision a function understand() that can:

(1) Identify all classes with the prefix c: in an HTML document.

(2) Determine what comes after the c: prefix, such as c:bg- indicating a CSS background property and c:text- representing a CSS color property, among others.

(3) Extract and set the value, for instance, c:bg-#008eff signifies a CSS background property with the value #008eff.

(4) Strip away the c:bg-, c:text-, etc. prefixes from the obtained class string and utilize the remaining part to define styles.

We have our example:

<body class="c:bg-#008eff">
  <h1 class="c:bg-#ff5c5c">Hello, <span class="c:bg-white">World !</span></h1>

In the output of the above code in a browser window, we would see the body with a background of #008eff, h1 with a background of #ff5c5c, and span with a white background.

Another example:

<body>
  <h1 class="c:text-#ff5c5c c:pad-20px">Hello, <span class="c:text-#008eff c:mar-20px">World !</span></h1>

In the output of the above code in a browser window, the h1 element would have a color of #ff5c5c and a padding of 20px while the span would have a color of #008eff and a margin of 20px.

Lastly, it is crucial to note that if the same type of code is repeated, the last one will overwrite the first one. For example:

<h1 class="c:bg-blue c:bg-red">Hello</h1> 
<!-- Executes red background -->

I hope my explanation is clearer now! Can the understand() function become a reality?

Thank you for taking the time to read this.

javascript css class

Answer 1

Answer №1

When approaching a more efficient solution, one option is to utilize the data-* attribute:

const applyStyle = el => el.style.cssText = el.dataset.style;

document.querySelectorAll("[data-style]").forEach(applyStyle);

<h1 data-style="color:#f0b; background:#0bf;">TEST</h1>
<h1 data-style="color:#b0f; background:#fb0;">TEST</h1>

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText

Alternatively, another approach could be:

const props = {
  bg: 'background',
  text: 'color',
  pad: 'padding'
};

const understand = el => {
  const c_classes = [...el.classList].filter(name => name.startsWith('c:'));
  return el.style.cssText = c_classes.map(k => {
    const pv = k.split('c:')[1].split('-');
    return `${props[pv[0]]}:${pv[1]}`;
  }).join(';');
}

const ELZ = document.querySelectorAll("[class^='c:'], [class*=' c:']");
ELZ.forEach(understand);

<h1 class="test c:bg-yellow c:pad-20px c:text-#0bf bla">
    Hello, <span class="c:bg-red">World !</span>
</h1>

Answer 2

When approaching a more efficient solution, one option is to utilize the data-* attribute:

const applyStyle = el => el.style.cssText = el.dataset.style;

document.querySelectorAll("[data-style]").forEach(applyStyle);

<h1 data-style="color:#f0b; background:#0bf;">TEST</h1>
<h1 data-style="color:#b0f; background:#fb0;">TEST</h1>

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText

Alternatively, another approach could be:

const props = {
  bg: 'background',
  text: 'color',
  pad: 'padding'
};

const understand = el => {
  const c_classes = [...el.classList].filter(name => name.startsWith('c:'));
  return el.style.cssText = c_classes.map(k => {
    const pv = k.split('c:')[1].split('-');
    return `${props[pv[0]]}:${pv[1]}`;
  }).join(';');
}

const ELZ = document.querySelectorAll("[class^='c:'], [class*=' c:']");
ELZ.forEach(understand);

<h1 class="test c:bg-yellow c:pad-20px c:text-#0bf bla">
    Hello, <span class="c:bg-red">World !</span>
</h1>

Answer 3

Answer №2

Although it is recommended to use the data-* attribute, here is a workaround using regex to extract and apply classes:

function assignStyle(element, property, val) {

  const properProperty = shortToProper[property] || property;

  element.style[properProperty] = val;
}

const shortToProper = {
  "bg": "background",
  "text": "color",
  "pad": "padding",
  "mar": "margin"
};

const pattern = /c:(\w+)-([^\s]*)/g;

const elems = document.querySelectorAll(`[class^='c:'],[class*=' c:']`);

elems.forEach(elem => {
  const matches = elem.className.matchAll(pattern);

  for (const match of matches) {
    assignStyle(elem, match[1], match[2]);
  }

});

<body class="test c:bg-#008eff">
  <h1 class="c:bg-#ff5c5c">Hello, <span class="c:bg-white">World !</span></h1>
  <h1 class="c:text-#ff5c5c c:pad-20px">Hello, <span class="c:text-#008eff c:mar-20px">World !</span></h1>
  <h1 class="c:bg-blue c:bg-red">Hello</h1>
</body>

Alternatively, here's an improved approach using data-c:

function assignStyle(el, style, value) {

  const styledProperty = shortToProper[style] || style;

  el.style[styledProperty] = value;
}

const shortToProper = {
  "bg": "background",
  "text": "color",
  "pad": "padding",
  "mar": "margin"
};

const pattern = /(\w+)-([^\s]*)/g;

const elements = document.querySelectorAll('[data-c]');

elements.forEach(element => {
  const matches = element.dataset.c.matchAll(pattern);

  for (const match of matches) {
    assignStyle(element, match[1], match[2]);
  }

});

<body data-c="bg-#008eff">
  <h1 data-c="bg-#ff5c5c">Hello, <span data-c="bg-white">World !</span></h1>
  <h1 data-c="text-#ff5c5c pad-20px">Hello, <span data-c="text-#008eff mar-20px">World !</span></h1>
  <h1 data-c="bg-blue bg-red">Hello</h1>
</body>

Answer 4

Although it is recommended to use the data-* attribute, here is a workaround using regex to extract and apply classes:

function assignStyle(element, property, val) {

  const properProperty = shortToProper[property] || property;

  element.style[properProperty] = val;
}

const shortToProper = {
  "bg": "background",
  "text": "color",
  "pad": "padding",
  "mar": "margin"
};

const pattern = /c:(\w+)-([^\s]*)/g;

const elems = document.querySelectorAll(`[class^='c:'],[class*=' c:']`);

elems.forEach(elem => {
  const matches = elem.className.matchAll(pattern);

  for (const match of matches) {
    assignStyle(elem, match[1], match[2]);
  }

});

<body class="test c:bg-#008eff">
  <h1 class="c:bg-#ff5c5c">Hello, <span class="c:bg-white">World !</span></h1>
  <h1 class="c:text-#ff5c5c c:pad-20px">Hello, <span class="c:text-#008eff c:mar-20px">World !</span></h1>
  <h1 class="c:bg-blue c:bg-red">Hello</h1>
</body>

Alternatively, here's an improved approach using data-c:

function assignStyle(el, style, value) {

  const styledProperty = shortToProper[style] || style;

  el.style[styledProperty] = value;
}

const shortToProper = {
  "bg": "background",
  "text": "color",
  "pad": "padding",
  "mar": "margin"
};

const pattern = /(\w+)-([^\s]*)/g;

const elements = document.querySelectorAll('[data-c]');

elements.forEach(element => {
  const matches = element.dataset.c.matchAll(pattern);

  for (const match of matches) {
    assignStyle(element, match[1], match[2]);
  }

});

<body data-c="bg-#008eff">
  <h1 data-c="bg-#ff5c5c">Hello, <span data-c="bg-white">World !</span></h1>
  <h1 data-c="text-#ff5c5c pad-20px">Hello, <span data-c="text-#008eff mar-20px">World !</span></h1>
  <h1 data-c="bg-blue bg-red">Hello</h1>
</body>

"Utilize the style attribute to modify the appearance based on the

Answer №1

Answer №2

Similar questions

Determine the byte size of the ImageData Object

Encountering ReferenceError while running production build with Webpack

How can I make the columns in Next.js / Tailwind expand horizontally first instead of vertically?

Shape with a dark border div

Toggle the visibility of table rows based on a specific class using a checkbox

What is the best way to display the current scroll percentage value?

Tips for utilizing maps in a react component within a Next.js application

Adding a class to a navigation item based on the route path can be achieved by following

Code snippet for a click event in JavaScript or jQuery

Obtain a string of characters from different words

display a loading spinner for number input fields in HTML5

Leveraging the Meteor Framework for Application Monitoring

Is it possible to absolutely position an element using its own bottom edge as a reference point?

What could be causing the issue of PHP not receiving this multidimensional array through Ajax?

Images are failing to show up in the iPhone design

Having difficulty interpreting the json data retrieved from the specified url

Emphasize the URL of the current page and navigate up one level

Exploring the power of async/await in conjunction with loops

The "loose" mode is not resolving the issue with the lack of support for the experimental syntax 'classProperties' that is currently disabled

A Guide to Importing CSV Data Into a Datatable