কম্পিউটার

HTML DOM অফসেট প্রস্থ সম্পত্তি


HTML DOM offsetWidth বৈশিষ্ট্য একটি উপাদানের প্রস্থের সাথে সম্পর্কিত একটি সংখ্যা প্রদান করে যার প্যাডিং, সীমানা এবং স্ক্রলবার সহ কিন্তু এর মার্জিন নয়।

নিচের সিনট্যাক্স −

রিটার্নিং নম্বর মান

HTMLelement.offsetWidth

আসুন HTML DOM offsetWidth-এর একটি উদাহরণ দেখি সম্পত্তি -

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetHeight</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
   #containerDiv {
      margin: 0 auto;
      height: 100px;
      width: 100px;
      overflow: auto;
   }
</style>
</head>
<body>
   <form>
      <fieldset>
         <legend>HTML-DOM-offsetHeight</legend>
         <div id="containerDiv">
            <img id="image" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">
         </div>
         <input type="button" onclick="getHeight()" value="Get height of picture">
         <input type="button" onclick="fitHeight()" value="Remove Scrollbars">
         <div id="divDisplay">
         </div>
      </fieldset>
   </form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var imgSelect = document.getElementById("image");
   var containerDiv = document.getElementById("containerDiv");
   function getHeight() {
      divDisplay.innerHTML = 'Height of above picture with padding & border: '+imgSelect.offsetHeight;
      divDisplay.innerHTML += '<br>Height of container with padding & border: '+containerDiv.offsetHeight;
   }
   function fitHeight() {
      containerDiv.style.height = imgSelect.height+'px';
      containerDiv.style.width = imgSelect.width+'px';
      containerDiv.style.overflow = 'hidden';
      getHeight();
   }
</script>
</body>
</html>

আউটপুট

কোনো বোতামে ক্লিক করার আগে −

HTML DOM অফসেট প্রস্থ সম্পত্তি

'ছবির প্রস্থ পান' ক্লিক করার পরে৷ বোতাম -

HTML DOM অফসেট প্রস্থ সম্পত্তি

'স্ক্রলবারগুলি সরান' ক্লিক করার পরে৷ বোতাম -

HTML DOM অফসেট প্রস্থ সম্পত্তি


  1. HTML DOM ওল স্টার্ট প্রপার্টি

  2. HTML DOM ওল বিপরীত সম্পত্তি

  3. HTML DOM অফসেট প্যারেন্ট প্রপার্টি

  4. HTML DOM শিরোনাম সম্পত্তি