Динамическое добавление стилей и классов css с помощью JS

Question

у меня есть массив тегов:

let tags = ['div', 'a', 'p'];

и массив классов:

let classes = ['.mystyle','.anotherClass','.thirdClass'];

Не могу разобраться как мне добавить контент элемента style с описанием классов, имена которых находятся в массиве classes. Итерировать массив tags, создавая соответствующие элементы и вставляя их на страницу, добавляя каждому элементу класс из массива classes сделал поппытку, и дальше не разберусь что делать:

    let stylee = document.head.appendChild(document.createElement('style'));
  stylee.textContent = classes.join(' ')
    
tags.forEach((tag) => {
    let elem = document.body.appendChild(document.createElement(tag));
  });

Answer 1

const tags = ['div', 'a', 'p'];
const classes = ['mystyle', 'anotherClass', 'thirdClass'];

const domElems = tags.map(tag => {
  const domElem = document.createElement(tag);
  domElem.innerHTML = tag; // закомментировать
  domElem.classList.add(...classes);
  return domElem;
});

domElems.forEach(domElem => {
  document.body.append(domElem);
});

.mystyle {
  color: red;
}

.anotherClass {
  border: 4px solid pink;
}

.thirdClass {
  margin: 10px;
  padding: 10px;
  display: block;
}

C добавлением стилей через js:
Тут я использовал немного чужого кода, для создания функции добавления CSS в DOM дерево: источник

const tags = ['div', 'a', 'p'];
const classes = [{
  name: 'mystyle',
  properties: [{
    'color': 'red'
  }]
}, {
  name: 'anotherClass',
  properties: [{
    'border': '4px solid pink'
  }]
}, {
  name: 'thirdClass',
  properties: [{
    'margin': '10px',
    'padding': '10px',
    'display': 'block'
  }]
}];

const sheet = createStyleSheet();

classes.forEach(classItem => {
  for (propertyObj of classItem.properties) {

    for (property in propertyObj) {
      const cssText = `${property}: ${propertyObj[property]}`
      sheet.addRule(`.${classItem.name}`, cssText);
    }

  }
});

const classesName = classes.map(classItem => classItem.name);
const domElems = tags.map(tag => {
  const domElem = document.createElement(tag);
  domElem.innerHTML = tag; // закомментировать
  domElem.classList.add(...classesName);
  return domElem;
});

domElems.forEach(domElem => {
  document.body.append(domElem);
});

function createStyleSheet(href) {
  if (typeof document.createStyleSheet === 'undefined') {
    const createStyleSheetLocal = (href) => {
      function createStyleSheet(href) {
        if (typeof href !== 'undefined') {
          var element = document.createElement('link');
          element.type = 'text/css';
          element.rel = 'stylesheet';
          element.href = href;
        } else {
          var element = document.createElement('style');
          element.type = 'text/css';
        }

        document.getElementsByTagName('head')[0].appendChild(element);
        var sheet = document.styleSheets[document.styleSheets.length - 1];

        if (typeof sheet.addRule === 'undefined')
          sheet.addRule = addRule;

        if (typeof sheet.removeRule === 'undefined')
          sheet.removeRule = sheet.deleteRule;

        return sheet;
      }

      function addRule(selectorText, cssText, index) {
        if (typeof index === 'undefined')
          index = this.cssRules.length;

        this.insertRule(selectorText + ' {' + cssText + '}', index);
      }

      return createStyleSheet(href);
    };
    return createStyleSheetLocal(href);
  }
}

БЛОГ НА HUSL

Динамическое добавление стилей и классов css с помощью JS

Ответы (1 шт):