.Width () দ্বারা প্রদত্ত গোল মান না করে jQuery কীভাবে করবেন?

Question 1

আমি চারপাশে অনুসন্ধান করেছি এবং এটি খুঁজে পাইনি। আমি একটি ডিভের প্রস্থ অর্জন করার চেষ্টা করছি, তবে এর দশমিক বিন্দু থাকলে এটি সংখ্যাটি গোল করে।

উদাহরণ:

#container{
    background: blue;
    width: 543.5px;
    height: 20px;
    margin: 0;
    padding: 0;
}

আমি যদি $('#container').width();এটি করি তবে 543.5 এর পরিবর্তে 543 ফিরে আসবে। আমি কীভাবে এটির সংখ্যাটি গোল না করে পুরো 543.5 (বা এটি যে সংখ্যা হ'ল) ফিরিয়ে দেব।

Question 2

Element.getBoundingClientRectউপাদানটির শৈলীর চেয়ে নেটিভ ব্যবহার করুন । এটি আই 4 তে চালু হয়েছিল এবং এটি সমস্ত ব্রাউজার দ্বারা সমর্থিত:

$("#container")[0].getBoundingClientRect().width

দ্রষ্টব্য: আইই 8 এবং এর জন্য , এমডিএন ডক্সে "ব্রাউজারের সামঞ্জস্য" নোটগুলি দেখুন ।

কোড স্নিপেট দেখান

$("#log").html(
  $("#container")[0].getBoundingClientRect().width
);

#container {
    background: blue;
    width: 543.5px;
    height: 20px;
    margin: 0;
    padding: 0;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container"></div>
<p id="log"></p>

স্নিপেট প্রসারিত করুন

Question 3

রস অ্যালেনের উত্তর একটি ভাল সূচনা পয়েন্ট তবে getBoundingClientRect () ব্যবহার করে প্রস্থে প্যাডিং এবং সীমানা প্রস্থও অন্তর্ভুক্ত থাকবে যা জ্যাকুইয়ের প্রস্থের কাজ নয় :

প্রত্যাবর্তিত পাঠ্য আয়তক্ষেত্র অবজেক্টে প্যাডিং, স্ক্রোলবার এবং সীমানা অন্তর্ভুক্ত থাকে তবে মার্জিনটি বাদ দেয়। ইন্টারনেট এক্সপ্লোরারে, সীমাবদ্ধ আয়তক্ষেত্রের স্থানাঙ্কগুলিতে ক্লায়েন্ট ক্ষেত্রের উপরের এবং বাম সীমানা অন্তর্ভুক্ত থাকে।

যদি আপনার উদ্দেশ্যটি widthনির্ভুলতার সাথে মানটি পেতে হয় তবে আপনাকে প্যাডিং এবং সীমানাটি এভাবে মুছে ফেলতে হবে:

var a = $("#container");
var width = a[0].getBoundingClientRect().width;

//Remove the padding width (assumming padding are px values)
width -= (parseInt(a.css("padding-left")) + parseInt(a.css("padding-right")));

//Remove the border width
width -= (a.outerWidth(false) - a.innerWidth());

Question 4

এখানে আমার অভিজ্ঞতাটি যুক্ত করতে চেয়েছিলেন, যদিও প্রশ্নের পুরাতন: উপরের sensকমত্যটি মনে হয়েছে যে জিকুয়েরির গোলটি কার্যকরভাবে একটি সীমাহীন গণনার মতো কার্যকর - তবে আমি যে কাজটি করেছি তার ক্ষেত্রে তেমনটি মনে হয় না doesn't ।

আমার উপাদানটির তরল প্রস্থ থাকে, সাধারণত, তবে এজেএক্সের মাধ্যমে গতিময় পরিবর্তিত সামগ্রী। সামগ্রীটি স্যুইচ করার আগে আমি অস্থায়ীভাবে উপাদানটির মাত্রাগুলি লক করে রাখি যাতে আমার লেআউটটি সংক্রমণের সময় চারদিকে না ounce আমি দেখতে পেয়েছি যে এই জাতীয় jQuery ব্যবহার করে:

$element.width($element.width());

কিছু মজাদারতা সৃষ্টি করছে, যেমন প্রকৃত প্রস্থ এবং গণনা করা প্রস্থের মধ্যে সাব-পিক্সেল পার্থক্য রয়েছে। (বিশেষত, আমি পাঠ্যের এক লাইন থেকে অন্য রেখায় একটি শব্দ লাফ দেখতে পাব, প্রস্থটি কেবলমাত্র লক করা হয়নি বলে নির্দেশ করে)) অন্য একটি প্রশ্ন থেকে - একটি উপাদানটির আসল, ভাসমান-বিন্দুর প্রস্থ পাওয়া - আমি পেয়েছি এটি window.getComputedStyle(element).widthএকটি নিরবচ্ছিন্ন গণনা ফিরিয়ে দেবে। তাই আমি উপরের কোডটি এমন কিছুতে পরিবর্তন করেছি

var e = document.getElementById('element');
$('#element').width(window.getComputedStyle(e).width);

এবং সেই কোড সহ - কোনও মজার বাউন্সিং নেই! এই অভিজ্ঞতাটি মনে হয় যে সীমাহীন মানটি ব্রাউজারের সাথে আসলেই আসে না, তাই না? (আমার ক্ষেত্রে, ক্রোম সংস্করণ 26.0.1410.65)

Question 5

আপনি getComputedStyleএটির জন্য ব্যবহার করতে পারেন :

parseFloat(window.getComputedStyle($('#container').get(0)).width)

Question 6

সঠিক প্রস্থ পেতে নিম্নলিখিতটি ব্যবহার করুন:

var htmlElement=$('class or id');
var temp=htmlElement[0].style.width;