JSFiddle - React, Tailwind, and code Playground

by stitot

HTML

<div id="example">Example Element</div>

CSS

#example {
            width: 150px;
            min -height: 100px;
            hei ght: 100px;
            background-color: lightblue;
            margin: 20px;
            border: 2px solid black;
        }

JavaScript

function getComputedStyleForElement(elementId) {
            // Get the element by ID
            const element = document.getElementById(elementId);

            if (element) {
                // Get the computed style object
                const computedStyle = window.getComputedStyle(element);

                // Log all the computed styles
                console.log(`Computed styles for element with ID "${elementId}":`);
                //for (const property of computedStyle) {
                    //console.log(`${property}: ${computedStyle.getPropertyValue(property)}`);
                    cssHeight = computedStyle.getPropertyValue("height"); 
                    console.log(cssHeight);
               // }
            } else {
                console.error(`Element with ID "${elementId}" not found.`);
            }
        }

        // Call the function for the example element
        getComputedStyleForElement("example");