Стоит задача изменить название css классов у элементов с kebab-case на camelCase.
У меня на эту задачу есть несколько решений, какое использовать лучше или может быть ни одно не верно?
document.body.querySelectorAll('*').forEach((element) => {
if (element.hasAttribute('class')) {
element.setAttribute('class', kebabCaseToCamelCase(element.getAttribute('class')));
}
});
document.body.querySelectorAll('*').forEach((element) => {
if (element.classList.length) {
element.classList.value = kebabCaseToCamelCase(element.classList.value);
}
});
document.body.querySelectorAll('*').forEach((element) => {
if (element.tagName === 'svg' && element.getAttribute('class')) {
element.setAttribute(
'class',
kebabCaseToCamelCase(element.getAttribute('class')),
);
} else if (element.className) {
element.className = kebabCaseToCamelCase(element.className);
}
});
document.body.addEventListener('click', () => {
document.body.querySelectorAll('*').forEach((element) => {
const currentClassesNames = [...element.classList];
const transformedClassesNames =
currentClassesNames.map(kebabCaseToCamelCase);
element.classList.remove(...currentClassesNames);
element.classList.add(...transformedClassesNames);
});
});
