<header>
    <h2 class="title">Window.getComputedStyle() Method</h2>
    <p class="description">Цей метод дозволяє отримувати обчислені стилі елементів на веб-сторінці.</p>
</header>
<main>
    <div class="result">
        <div id="styleBox">Це текст для демонстрації</div>
        <label for="bgColor">Колір фону:</label>
        <input type="color" id="bgColor">
        <label for="textColor">Колір тексту:</label>
        <input type="color" id="textColor">
    </div>
</main>
body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#styleBox {
  padding: 20px;
  text-align: center;
}

input[type="color"] {
  margin: 10px;
}

document.addEventListener("DOMContentLoaded", function() {
    var bgColorInput = document.getElementById("bgColor");
    var textColorInput = document.getElementById("textColor");
    var styleBox = document.getElementById("styleBox");

    // Функція для оновлення стилів за значеннями ползунків
    function updateStyles() {
        var bgColor = bgColorInput.value;
        var textColor = textColorInput.value;
        
        styleBox.style.backgroundColor = bgColor;
        styleBox.style.color = textColor;
        
        // Використовуємо getComputedStyle() для отримання поточних стилів та виведення їх в консоль
        var computedStyle = window.getComputedStyle(styleBox);
        console.log('Фон: ' + computedStyle.backgroundColor);
        console.log('Колір тексту: ' + computedStyle.color);
    }

    // Встановлюємо початкові значення
    bgColorInput.value = "#f8f8f8";
    textColorInput.value = "#000000";
    updateStyles();

    // Додаємо обробники подій для ползунків
    bgColorInput.addEventListener("input", updateStyles);
    textColorInput.addEventListener("input", updateStyles);
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.