প্রস্থ, অভ্যন্তরীণ প্রস্থ এবং বহির্মুখী, উচ্চতা, অভ্যন্তরীণ উচ্চতা এবং জিকুয়েরিতে বহির্মুখের মধ্যে পার্থক্য কী?


124

পার্থক্য কী তা দেখার জন্য আমি কিছু উদাহরণ লিখেছি তবে তারা আমাকে প্রস্থ এবং উচ্চতার জন্য একই ফলাফল প্রদর্শন করে।

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var div = $('.test');
                var width = div.width(); // 200 px
                var innerWidth = div.innerWidth(); // 200px
                var outerWidth = div.outerWidth(); // 200px

                var height = div.height(); // 150 px
                var innerHeight = div.innerHeight(); // 150 px
                var outerHeight = div.outerHeight(); // 150 px
            });

        </script>
        <style type="text/css">
            .test
            {
                width: 200px;
                height: 150px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

এই উদাহরণে আপনি দেখতে পাচ্ছেন যে তারা একই ফলাফল আউটপুট দেয়। কেউ যদি পার্থক্যটি জানেন তবে দয়া করে আমাকে উপযুক্ত উত্তরটি দেখান।

ধন্যবাদ।


8
আপনি jQuery ডকুমেন্টেশন তাকান?
ব্র্যাড এম

1
আপনার মধ্যে প্যাডিং, সীমানা এবং মার্জিন যুক্ত করার চেষ্টা করুন <div>এবং দেখুন যে এটি বিভিন্ন ফলাফল দেয় কিনা;)
নিট দ্য ডার্ক আবসোল

4
api.jquery.com / ক্যাটাগরী / মাত্রা page পৃষ্ঠাটি তাদের সমস্ত বর্ণনা করে এবং যদি আপনি প্রতিটি ক্লিক করেন তবে আরও বেশি তথ্য দেয়।
JClaspill

আমি গুগলে অনুসন্ধান করেছি, তবে উত্তরগুলির কোনওটিই আমার প্রত্যাশা পূরণ করে না।
zajke

@ ব্র্যাডএম - কোনও মানুষ নেই। তবে "প্রস্থের মধ্যে পার্থক্য, অভ্যন্তরীণ প্রস্থ, বহির্মুখী জ্যাকুয়ারি" এর ফলাফলগুলি আমাকে প্রয়োজনীয় কিছু বলে না।
zajke

উত্তর:


282

আপনি কি এই উদাহরণগুলি দেখেছেন? আপনার প্রশ্নের অনুরূপ দেখাচ্ছে।

প্রস্থ এবং উচ্চতা সঙ্গে কাজ

এখানে চিত্র বর্ণনা লিখুন

jQuery - মাত্রা

jQuery: উচ্চতা, প্রস্থ, অভ্যন্তরীণ এবং বাইরের


1
সর্বকালের সেরা উত্তর
বেনিয়ামিন

আমি ঠিক এখন থেকে নীচে একটি উত্তর পোস্ট করেছি এখন থেকে আমি দুটি বর্ণনার মধ্যে একটি ভিন্ন আচরণ দেখতে পাচ্ছি যা আপনার বিবরণ দিয়ে অনুমান করা হয়নি
GWorking

16

একটি মন্তব্যে উল্লিখিত হিসাবে, ডকুমেন্টেশনগুলি আপনাকে জানায় যে পার্থক্যগুলি ঠিক কী। তবে সংক্ষেপে:

  • ইনারওয়াইথ / ইনারহাইট - এর মধ্যে প্যাডিং রয়েছে তবে সীমানা নেই
  • আউটডোর প্রস্থ / আউটহাইট - এতে প্যাডিং, সীমানা এবং optionচ্ছিকভাবে মার্জিন অন্তর্ভুক্ত রয়েছে
  • উচ্চতা / প্রস্থ - উপাদানের উচ্চতা (কোনও প্যাডিং নেই, কোনও প্রান্ত নেই, কোনও সীমানা নেই)

4
  • প্রস্থ = প্রস্থ পান,

  • অভ্যন্তরীণ প্রস্থ = প্রস্থ + প্যাডিং পান,

  • বহির্মুখী = প্রস্থ + প্যাডিং + বর্ডার এবং optionচ্ছিকভাবে মার্জিন পান

আপনি যদি পরীক্ষা করতে চান তবে আপনার .টেস্ট ক্লাসে কিছু প্যাডিং, মার্জিন, সীমানা যুক্ত করুন এবং আবার চেষ্টা করুন।

এছাড়াও পর্যন্ত পড়েছেন jQuery এর ডক্স ... আপনি যা প্রয়োজন প্রায় কাছাকাছি আছে


2

মান অ্যাসাইনমেন্ট সম্পর্কে জানানো এবং জেকিউ-র "প্রস্থ" পরামিতির অর্থের সাথে তুলনা করা প্রয়োজন বলে মনে হচ্ছে: (ধরে নিও যে নিউ_ভ্যালু পিএক্স ইউনিটে সংজ্ঞায়িত হয়েছে)

jqElement.css('width',new_value);
jqElement.css({'width: <new_value>;'});
getElementById('element').style.width= new_value;

তিনটি নির্দেশাবলী একই প্রভাব দেয় না: কারণ প্রথম জেকোরি নির্দেশটি উপাদানটির অভ্যন্তরীণ প্রস্থকে সংজ্ঞায়িত করে "প্রস্থ" নয়। এটা কৌতুকপূর্ণ।

একই প্রভাব পেতে আপনাকে অবশ্যই প্যাডিংগুলি গণনা করতে হবে (ধরুন ভের প্যাডগুলি হয়), খাঁটি জেএস (বা সিএসএস প্যারামিটার 'প্রস্থ') হিসাবে একই ফলাফল পাওয়ার জন্য জ্যাকুরির জন্য সঠিক নির্দেশটি হ'ল:

jqElement.css('width',new_value+pads);

আমরা এটির জন্যও লক্ষ করতে পারি:

var w1 = jqElement.css('width');
var w2 = jqelement.width();

ডাব্লু 1 হ'ল অভ্যন্তরীণ প্রস্থ, অন্যদিকে ডাব্লু 2 প্রস্থ (সিএসএস অ্যাট্রিবিউট অর্থ) পার্থক্য যা জকিউ এপিআই ডকুমেন্টেশনে নথিভুক্ত হয় না।

শুভেচ্ছান্তে

Trebly


দ্রষ্টব্য: আমার মতে এটি একটি বাগ জেকিউ 1.12.4 হিসাবে বিবেচিত হতে পারে বাইরে যাওয়ার উপায়টি অবশ্যই নিশ্চিতভাবে .css ('পরামিতি', মান) জন্য স্বীকৃত প্যারামিটারগুলির একটি তালিকা প্রবর্তন করা উচিত কারণ 'পরামিতিগুলি' এর পিছনে বিভিন্ন অর্থ রয়েছে স্বীকৃত, যা আগ্রহ আছে কিন্তু সর্বদা পরিষ্কার হতে হবে। এই ক্ষেত্রে: 'অভ্যন্তরীণ প্রস্থ' এর অর্থ 'প্রস্থ' এর মতো হবে না। বাক্যটির সাহায্যে .width (মান) এর ডকুমেন্টেশনের ক্ষেত্রে আমরা এই সমস্যার একটি ট্র্যাক পেতে পারি: "নোট করুন যে আধুনিক ব্রাউজারগুলিতে সিএসএস প্রস্থের সম্পত্তি প্যাডিং অন্তর্ভুক্ত করে না"


যুক্ত মোচড়: .css('width')যখন .outerWidth()( যেমন এটি সীমান্তের পাশাপাশি প্যাডিং অন্তর্ভুক্ত করে) একই হয় box-sizing: border-box;
বব স্টেইন

0

উপরের সমস্ত উত্তর সহ একমত। উইন্ডো বা ব্রাউজারের সম্ভাবনাগুলির innerWidth/ innerheightসাথে যুক্ত করতে কেবল উইন্ডো সামগ্রীর ক্ষেত্র অন্তর্ভুক্ত থাকে, অন্য কিছু নয়

outerWidth/ outerHeight উইন্ডোজ সামগ্রীর ক্ষেত্রের অঞ্চল অন্তর্ভুক্ত করে এবং এটির পাশাপাশি এটি সরঞ্জামদণ্ড, স্ক্রোলবার ইত্যাদির মতো জিনিসও অন্তর্ভুক্ত করে ... এবং এই মানগুলি সর্বদা অভ্যন্তরীণপরিধি / অভ্যন্তরীণ উচ্চতার মানগুলির তুলনায় সমান বা বৃহত্তর হবে।

আশা করি এটি আরও সহায়তা করে ...


0

আমি এখনই যা দেখছি তা হ'ল innerWidthএতে সম্পূর্ণ সামগ্রী অন্তর্ভুক্ত রয়েছে

এটি হ'ল, যদি উইন্ডোটি থাকে 900pxএবং সামগ্রীটি 1200px(এবং সেখানে একটি স্ক্রোল থাকে)

  • innerWidth আমাকে দেয় 1200px
  • outerWidth আমাকে দেয় 900px

আমার চোখে পুরোপুরি অপ্রত্যাশিত

* আমার ক্ষেত্রে বিষয়বস্তুটি একটিতে অন্তর্ভুক্ত রয়েছে <iframe>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.