Отслеживать с помощью MutationObserver появление элементов document.querySelector('......') и вносить свои правки .setAttribute("style", ".....")?

Question

[CCO]

День добрый, помогите написать небольшой скрип для изменения оформления сайта
Перевел один сайт на русский, появилось много текстовый элементов которые смещены либо не помещаются.

Необходимо отслеживать с помощью MutationObserver появление элементов document.querySelector('...') и вносить свои правки .setAttribute("style", "........") .
Так как элементов редактировать много его желательно сделать const

const style = [
  [`'label[class^="raw_components--labelInactive--"]', `"style", "width: 150px;line-height: 15px;"`],

Comments

[Tim]

в чем вопрос?

[CCO]

Tim, Я скрипт не могу написать ̶ ̶у̶ ̶м̶е̶н̶я̶ ̶л̶а̶п̶к̶и̶ ,я тупой в JAVASCRIPT знаю только поверхностно, а готового шаблона в интернете не нашёл ))))

[Tim]

CCO, какая проблема то возникла?

[CCO]

Tim, Да проблем то нет, просто попросил написать скрипт на подобии того каким я перевел сайт.

const allData = [
  [` autosave `, ` Автосохранение`],
  [` Copy link`, ` Копировать ссылку`],
  [` device.`, ` Загрузить Figma Mirror Figma Mirror на устройство.`],
  [` follower`, ` Подписчики`],
  [` following`, ` Подписаться`],
]


let MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
let MutationObserverConfig = {
  childList: true,
  subtree: true,
  attributeFilter: ['data-label'],
  characterData: true
};

let observer = new MutationObserver(function (mutations) {
  let treeWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_ALL,
    {
        acceptNode: function (node) {
            if(node.nodeType === 3 || node.hasAttribute('data-label')) {
                return NodeFilter.FILTER_ACCEPT;
            }else {
                return NodeFilter.FILTER_SKIP;
            }
        }
    },
    false
  );
  let dataMap = new Map();
  allData.forEach(([key, val]) => {
    if (key && !dataMap.has(key)) {
      dataMap.set(key, val);
    }
  });
  let currentNode = treeWalker.currentNode;
  while (currentNode) {
    if(currentNode.nodeType === 3) {
        let key1 = currentNode.textContent;
        if (dataMap.has(key1)) currentNode.textContent = dataMap.get(key1);
    }else {
        let key2 = currentNode.getAttribute('data-label');
        if (dataMap.has(key2)) currentNode.setAttribute('data-label', dataMap.get(key2));
    }

    currentNode = treeWalker.nextNode();
  }
});

observer.observe(document.body, MutationObserverConfig);

Даже написал как его можно сделать.

[Tim]

CCO, так вам на freelance.habr.com, а не сюда

[Павел Корнилов]

CCO, написанное чудовищно. Согласен с Tim: или фриланс, или изучать ЯС.