JavaScript getComputedStyle() for pseudo-elements

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

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

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

Example


<html>
<head>
    <title>JavaScript getComputedStyle() Demo</title>
    <style>

        p::first-letter {
            font-size: 1.5em;
            font-weight: normal
        }
    </style>
</head>
<body>
    <p id='main'>Parallel Codes</p>
    <script>
        let p = document.getElementById('main');
        let style = getComputedStyle(p, '::first-letter');
        document.writeln(style.fontSize);
    </script>
</body>
</html>

மேலே உள்ள Example-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு document.getElementById('main') என்ற method முறையில் ஒரு element ஐ select செய்து கொள்கிறோம் அதனை p என்ற variable store செய்து கொள்கிறோம். இந்த element க்கு நாம் சில style properties களை கொடுத்திருப்போம்.இங்கு முக்கியமாக ::first-letter என்ற pseudo-elements ஐ பயன்படுத்தி நாம் style களை apply செய்கிறோம்.இங்கு getComputedStyle(p, '::first-letter') என்ற method இல் நாம் select செய்த element மற்றும் pseudo-elements ஐ argument ஆக அனுப்பும் போது நமக்கு element குரிய style ஐ ஒரு object ஆக return செய்கிறது. நாம் அந்த object ஐ வைத்துகொண்டு அதாவது style மற்றும் dot operator ஐ பயன்படுத்தி object குரிய property ஐ access செய்து style களை கண்டறியலாம். இங்கு style.fontSize என கொடுக்கும் போது 24px என கிடைக்கிறது.

Output: 

   24px

Comments