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

<!DOCTYPE html>
<html>
    <head>
        <style>
.highlight {
    background: lightskyblue;
    padding: 10px;
}
        </style>
    </head>
<body>
    <h1>JS Get Element Computed Style</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);
        
        // element المطبقة على العنصر الذي يمثله المتغير CSS هنا قمنا بعرض بعض قيم خصائص
        document.write('color = ' + elementStyle.getPropertyValue('color') + '<br>');
		document.write('font-family = ' + elementStyle.getPropertyValue('font-family') + '<br>');
		document.write('font-size = ' + elementStyle.getPropertyValue('font-size') + '<br>');
		document.write('background = ' + elementStyle.getPropertyValue('background') + '<br>');
		document.write('padding = ' + elementStyle.getPropertyValue('padding'));
    </script>
</body>
</html>