JavaScript getComputedStyle

Javascript இல் getComputedStyle() method இங்கு ஒரு குறிப்பிட்ட element இன் ComputedStyle ஐ கொடுக்கிறது. இந்த method ஒரு object ஐ நமக்கு return செய்கிறது.

let style = window.getComputedStyle(element [,pseudoElement]);

Note: இங்கு getComputedStyle() method இல் இங்கு இரண்டு argument கள் அனுபப்படுகிறது. html element மற்றும் pseudoElement ஆகியன argument ஆக அனுபப்படுகிறது. இங்கு நாம் அனுப்பும் element ஐ பொருத்து ComputedStyle output ஆக கிடைக்கிறது. இங்கு getComputedStyle() method ஆனது ஒரு window object ஆகும். இங்கு முதல் argument ஆக ஒரு html element argument ஆக அனுபப்படுகிறது அடுத்த argument pseudoElement இது optional ஆகும் இது default ஆக null என இருக்கும்.

Example1


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS getComputedStyle() Demo</title>
    <style type="text/css">
        .message {
            border: solid 1px #f6b73c;
            padding: 20px;
            color: black;
        }
    </style>
</head>
<body>

    <p class="message" style="color:red">
        This is a JS getComputedStyle() Demo!
    </p>

    <script>
        let message = document.querySelector('.message');
        let style = getComputedStyle(message);

        document.writeln('color:', style.color);
        

        document.writeln('padding:', style.padding);
    </script>
</body>
</html>

மேலே உள்ள Example1-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு document.querySelector('.message') என்ற method முறையில் ஒரு element ஐ select செய்து கொள்கிறோம் அதனை message என்ற variable store செய்து கொள்கிறோம். இந்த element க்கு நாம் சில style properties களை கொடுத்திருப்போம். இங்கு getComputedStyle(message) என்ற method இல் நாம் select செய்த element ஐ argument ஆக அனுப்பும் போது நமக்கு element குரிய style ஐ ஒரு object ஆக return செய்கிறது. நாம் அந்த object ஐ வைத்துகொண்டு அதாவது style மற்றும் dot operator ஐ பயன்படுத்தி object குரிய property ஐ access செய்து style களை கண்டறியலாம். இங்கு style.color என கொடுக்கும் போது color:rgb(255, 0, 0) எனவும் மற்றும் style.padding என கொடுக்கும் போது padding:20px எனவும் கிடைக்கிறது.

Output: 

   color:rgb(255, 0, 0)
   padding:20px

Comments