محرر ويب أونلاين

<!DOCTYPE html>
<html>
    <head>
        <style>
.highlight {
    background: lightskyblue;
    padding: 10px;
}
        </style>
    </head>
<body>
    <h1>JS Get All CSS Properties Applied On The Element</h1>
    <p>You can use the "window.getComputedStyle()" method to get an 
        object contains all the computed properties for the element.</p>
    <p id="demo" class="highlight">I am using the highlight class.</p>

    <script>
        // element في متغير إسمه demo يساوي id هنا قمنا بتخزين العنصر الذي يملك
        var element = document.getElementById('demo');

        // elementStyle في المتغير element المطبقة على العنصر الذي يمثله المتغير CSS هنا قمنا بتخزين خصائص و قيم
        var elementStyle = window.getComputedStyle(element);
        
        // المطبقة على العنصر CSS هنا قمنا بإنشاء حلقة تعرض جميع خصائص و قيم
        // ملاحظة: سيظهر لك الخصائص الإفتراضية + التي قمت أنت بإضافتها للعنصر
        for (let i=0; i<elementStyle.length; i++) {
            document.write(elementStyle[i] + ': ' + elementStyle.getPropertyValue(elementStyle[i]) + '<br>');
        }
    </script>
</body>
</html>