Доступ к стилям и классам в JavaScript

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Доступ к стилям и классам в JavaScript</title>
     <link rel="stylesheet" href="styles.css">
     <script src="scripts.js"></script>
    </head>
   
    <body class="bodyClass red big" style="background-color: #ff5500;">
     Первый абзац.
    </body>
   
   </html>

CSS–разметка (styles.css):

   .bodyClass		{ color: #0000ff; }
   .red			{ color: #ff0000; }
   .big			{ font-size: 30px; }

JS–скрипты (scripts.js):

   window.onload = function()
   {
    var resultContainer = document.body;
   
    resultContainer.innerHTML += '<br><br><b>&lt;body&gt; className:</b> &#171;'+document.body.className+'&#187;';
    resultContainer.innerHTML += '<br><br><b>&lt;body&gt; classList:<br><br>';
    for(let name of document.body.classList)
    {
     resultContainer.innerHTML += name+'<br>';
    }
    resultContainer.innerHTML += '<br><b>&lt;body&gt; background-color:</b> '+document.body.style.backgroundColor;
    document.body.style.cssText = 'background-color: #ffffff; margin: 0;';
    resultContainer.innerHTML += '<br><br><b>&lt;body&gt; color:</b> '+window.getComputedStyle(document.body).getPropertyValue('color');
   };

Доступ к стилям и классам в JavaScript

Задание:

HTML–код (index.html):

CSS–разметка (styles.css):

JS–скрипты (scripts.js):

Результат: