const p = document.querySelector('p');
const div = document.querySelector('div');
const span = document.querySelector('span');
const h1 = document.querySelector('h1');
const h2 = document.querySelector('h2');

console.group('many style: ')
    console.time('many style');
        p.style.background = 'green';
        p.style.color = 'white';
        p.style.fontSize = '20px';
        p.style.margin = '0 0 20px';
        p.style.padding = '10px';
        p.style.textAlign = 'center';
        p.style.display = 'block';
    console.timeEnd('many style');
console.groupEnd();

console.group('one cssText: ')
    console.time('one cssText');
        div.style.cssText = 'background: green; color: white; font-size: 20px; margin: 0 0 20px; padding: 10px; text-align: center; display: block;';
    console.timeEnd('one cssText');
console.groupEnd();

console.group('setAttribute: ')
    console.time('setAttribute');
        span.setAttribute('style', 'background: green; color: white; font-size: 20px; margin: 0 0 20px; padding: 10px; text-align: center; display: block;');
    console.timeEnd('setAttribute');
console.groupEnd();

console.group('add class: ')
    console.time('add class');
        h1.classList.add('test-class');
    console.timeEnd('add class');
console.groupEnd();

console.group('add className: ')
    console.time('add className');
        h2.className = 'test-class';
    console.timeEnd('add className');
console.groupEnd();

Висновок: можна сміливо завжди використовувати метод setAttribute()!

•