jQuery में outerWidth और outerHeight विधियाँ

अंतिम जोड़ी विधियाँ - outerWidth और outerHeight हैं, जिनकी सहायता से तत्व की चौड़ाई और ऊँचाई सभी मार्जिन और बॉर्डर को शामिल करके प्राप्त करना संभव है, और बाहरी मार्जिन margin को शामिल नहीं भी किया जा सकता है।

आइए एक उदाहरण देखें। मान लीजिए हमारे पास एक पैराग्राफ है:

<p id="test">text</p>
<p id="out"></p>

CSS इस प्रकार दिखती है:

p {
	margin: 10px;
	padding: 5px;
	border: 2px solid blue;
}

आइए पैराग्राफ #test की चौड़ाई और ऊँचाई के मान प्राप्त करें, आंतरिक पैडिंग और बॉर्डर को शामिल करते हुए, इसके लिए इन विधियों में false पास करना होगा या कोष्ठकों को खाली छोड़ दें (क्योंकि यह डिफ़ॉल्ट रूप से विधि में पहले से ही सेट है):

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

अब हमारे मान 4px और अलग होंगे, क्योंकि प्रत्येक तरफ बॉर्डर की मोटाई 2px है।

और अब आइए पैराग्राफ #test की चौड़ाई और ऊँचाई के मान प्राप्त करें, सभी मार्जिन और बॉर्डर को शामिल करते हुए, इसके लिए outerWidth और outerHeight विधियों में true पास करना होगा:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

अब हमारे मान पिछले वाले से 20px और अलग होंगे, क्योंकि हमारे बाहरी मार्जिन प्रत्येक तरफ 10px हैं।

पिछले कार्यों के समाधान को पूरा करें - #wrapper डिव के नीचे तीसरे पैराग्राफ में डिव #wrapper की चौड़ाई और ऊँचाई के मान आउटपुट करें - आंतरिक पैडिंग और बॉर्डर को शामिल करते हुए, लेकिन बाहरी मार्जिन के बिना। चौथे पैराग्राफ में डिव #wrapper की चौड़ाई और ऊँचाई के मान सभी मार्जिन और बॉर्डर को शामिल करते हुए आउटपुट करें।

साथ ही outerWidth और outerHeight विधियों की सहायता से हम तत्वों की चौड़ाई और ऊँचाई के मान बदल सकते हैं। उदाहरण के लिए, आइए डिव #test1 की चौड़ाई 250px और डिव #test2 की ऊँचाई 200px सेट करें:

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

तत्व के आकार के साथ काम करने वाली सभी निर्दिष्ट विधियाँ सेट में प्रत्येक तत्व पर एक फ़ंक्शन लागू करने की संभावना भी प्रदान करती हैं।