Главная страница / Занятия / #3 / Доступ к вычисленным стилевым свойствам в JavaScript

Доступ к вычисленным стилевым свойствам в JavaScript

Задание:

Показать, как в JavaScript можно получить доступ к вычисленным стилевым свойствам элементов HTML-документа.

HTML–код (index.html):

   <!DOCTYPE html>
   
   <html lang="ru">
   
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Доступ к вычисленным стилевым свойствам в JavaScript</title>
     <link rel="stylesheet" href="styles.css">
     <script src="scripts.js"></script>
    </head>
   
    <body>
     <p id="red">Параграф с&nbsp;текстом красного цвета</p>
    </body>
   
   </html>

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

   #red		{ color: #ff0000; }

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

   window.onload = function()
   {
    var paragraphColor = window.getComputedStyle(document.getElementById('red')).getPropertyValue('color');
    alert('The color is: '+paragraphColor);
   };

Результат:

Результат выполнения задания можно посмотреть здесь.