JavaScript Getting the Width and Height of an Element

Javascript இல் ஒரு குறிப்பிட்ட element இன் width மற்றும் height ஐ கண்டறிய offsetWidth மற்றும் offsetHeight என்ற property ஆனது பயன்படுகிறது.

element.offsetWidth element.offsetHeight

Note: இங்கு ஒரு குறிப்பிட்ட element இல் இருக்கும் width மற்றும் height ஐ கண்டறிய offsetWidth மற்றும் offsetHeight என்ற property ஆனது பயன்படுகிறது. இங்கு width மற்றும் height ஐ கண்டறிய வேண்டிய element ஐ select செய்து கொண்டு பிறகு அதற்கு உரிய width மற்றும் height ஐ கண்டறியலாம்.இங்கு offsetWidth மற்றும் offsetHeight என்ற property ஆனது முக்கிய பங்கு வகிக்கிறது.இந்த property ஆனது மிகவும் பயனுள்ளதாக இருக்கிறது.

Example


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting the Width and Height of an Element</title>
</head>

<body>
    <div class="box" style="width:100px;height:150px;"></div>
    <script>
        let box = document.querySelector('.box');
        let width = box.offsetWidth;
        let height = box.offsetHeight;
        document.writeln("width : " +width);
        document.writeln("height : " +height);
    </script>
</body>
</html>

மேலே உள்ள Example-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுக்கப்பட்டுள்ளது. இங்கு document.querySelector('.box') என்ற function ஐ பயன்படுத்தி box என்ற class name கொண்ட ஒரு element ஆனது select செய்யப்படுகிறது. இங்கு element க்கு width மற்றும் height values ஆனது கொடுக்கப்படுகிறது.இங்கு element ஐ select செய்து கொண்ட பிறகு box.offsetWidth என்ற property க்கு 100px என்ற value மற்றும் அதேபோல் box.offsetHeight என கொடுக்கும் போது 150px என்ற value ஆனது நமக்கு கிடைக்கிறது. எனவே நமக்கு இங்கு ஒரு குறிப்பிட்ட element இன் width மற்றும் height values ஆனது நமக்கு output ஆக கிடைக்கிறது.

Output: 

width : 100 
height : 150

Comments