JQuery में तत्व की कुल चौड़ाई (गद्दी और सीमा सहित)

Question

विषय के रूप में, किसी को jQuery का उपयोग करते हुए, उसकी सीमा और गद्दी सहित किसी तत्व की कुल चौड़ाई कैसे मिल सकती है? मुझे jQuery आयाम प्लगइन मिला है, और .width()मेरे 760px-wide, 10px paddingDIV रिटर्न पर चल रहा है 760।

शायद मैं कुछ गलत कर रहा हूं, लेकिन अगर मेरा तत्व खुद के रूप में प्रकट होता है 780 pixels wideऔर फायरबग मुझे बताता है कि इस 10px paddingपर है, लेकिन कॉलिंग .width()केवल 760 देता है, मुझे यह देखने के लिए मुश्किल से दबाया जाएगा कि कैसे।

किसी भी सुझाव के लिए धन्यवाद।

Answer 1

[अपडेट करें]

मूल उत्तर jQuery 1.3 से पहले लिखा गया था, और फ़ंक्शन जो उस समय में मौजूद थे जहां पूरी चौड़ाई की गणना करने के लिए स्वयं द्वारा पर्याप्त नहीं थी।

अब, के रूप में जेपी सही ढंग से कहा गया है, jQuery कार्य करता है outerWidth और outerHeight जिसमें शामिल borderऔर paddingडिफ़ॉल्ट रूप से, और भी marginअगर समारोह के पहले तर्क हैtrue

---

[मूल उत्तर]

widthविधि नहीं रह गया है की आवश्यकता है dimensions, क्योंकि यह प्लगइन में जोड़ा गया हैjQuery Core

आपको उस विशेष div के पैडिंग, मार्जिन और बॉर्डर की चौड़ाई-मान प्राप्त करने और उन्हें widthविधि के परिणाम में जोड़ने की आवश्यकता है

कुछ इस तरह:

var theDiv = $("#theDiv");
var totalWidth = theDiv.width();
totalWidth += parseInt(theDiv.css("padding-left"), 10) + parseInt(theDiv.css("padding-right"), 10); //Total Padding Width
totalWidth += parseInt(theDiv.css("margin-left"), 10) + parseInt(theDiv.css("margin-right"), 10); //Total Margin Width
totalWidth += parseInt(theDiv.css("borderLeftWidth"), 10) + parseInt(theDiv.css("borderRightWidth"), 10); //Total Border Width

इसे और अधिक पठनीय बनाने के लिए कई लाइनों में विभाजित करें

इस तरह से आपको हमेशा सही गणना मूल्य मिलेगा, भले ही आप सीएसएस से पैडिंग या मार्जिन मानों को बदल दें

Comments

सामान्य तौर पर, मैं अपने हिसाब से गणना करने के बजाय jQuery पर विश्वास करूंगा। समस्या यह है कि चौड़ाई () फ़ंक्शन वास्तव में यह निर्दिष्ट नहीं करता है कि यह "बॉक्स-साइजिंग: बॉर्डर-बॉक्स" के मामले में क्या करता है। मैंने अभी इसका परीक्षण किया है, और यह पैडिंग आदि को छोड़कर आंतरिक चौड़ाई को लौटाता है। यह सही हो सकता है या नहीं; अलग-अलग लोग अलग-अलग चीजों की उम्मीद कर सकते हैं। तो ऊपर कोड नमूना वास्तव में काम करता है, लेकिन यह सबसे विश्वसनीय तरीका नहीं हो सकता है। जैसा कि कुछ अन्य उत्तरों में संकेत दिया गया है, मैं इसके बजाय आउटरविदथ () फ़ंक्शन का उपयोग करने की सलाह दूंगा। यह कम से कम वादे करता है कि इसे प्रलेखन में क्या माना जाता है।

— जान जिच

जब मैंने यह उत्तर लिखा था तब आउटरविद / आउटरहाइट फंक्शन मौजूद नहीं था।

— एंड्रियास ग्रेच

मेरे पुराने कोड पर एक त्वरित टिप्पणी, अगर किसी का अभी भी इसका उपयोग कर रहा है; parseInts में बदला जा सकता है +ऑपरेटर कोड अधिक संक्षिप्त बनाने के लिए। इसलिए, आदि parseInt(theDiv.css("padding-left"), 10)को चालू किया जा सकता है +theDiv.css("padding-left")...

— एंड्रियास ग्रीच

Answer 2

इस उत्तर पर ठोकर खाने वाले किसी अन्य व्यक्ति को ध्यान देना चाहिए कि jQuery अब (> = 1.3) की चौड़ाई / सीमाओं सहित पुनः प्राप्त करने के लिए outerHeight/ outerWidthकार्य हैं, उदा।

$(elem).outerWidth(); // Returns the width + padding + borders

मार्जिन को भी शामिल करने के लिए, बस पास करें true:

$(elem).outerWidth( true ); // Returns the width + padding + borders + margins

Comments

मेरे पास संपादन क्षमता नहीं है, लेकिन मैं पहली टिप्पणी को

— बदलूंगा

Answer 3

बाहरी रूप से ऐसा प्रतीत होता है जैसे कि जेकरी के नवीनतम संस्करण में टूट गया है।

विसंगति तब होती है जब

बाहरी div फ़्लोट किया गया है, आंतरिक div में चौड़ाई सेट है (बाहरी div से छोटी है) आंतरिक div में शैली = "वर्ण" है:

Answer 4

बस सादगी के लिए मैंने कुछ कार्यों में एंड्रियास ग्रेच के महान जवाब को समझाया। उन लोगों के लिए जो थोड़ा-सा कट-पेस्ट खुशी चाहते हैं।

function getTotalWidthOfObject(object) {

    if(object == null || object.length == 0) {
        return 0;
    }

    var value       = object.width();
    value           += parseInt(object.css("padding-left"), 10) + parseInt(object.css("padding-right"), 10); //Total Padding Width
    value           += parseInt(object.css("margin-left"), 10) + parseInt(object.css("margin-right"), 10); //Total Margin Width
    value           += parseInt(object.css("borderLeftWidth"), 10) + parseInt(object.css("borderRightWidth"), 10); //Total Border Width
    return value;
}

function  getTotalHeightOfObject(object) {

    if(object == null || object.length == 0) {
        return 0;
    }

    var value       = object.height();
    value           += parseInt(object.css("padding-top"), 10) + parseInt(object.css("padding-bottom"), 10); //Total Padding Width
    value           += parseInt(object.css("margin-top"), 10) + parseInt(object.css("margin-bottom"), 10); //Total Margin Width
    value           += parseInt(object.css("borderTopWidth"), 10) + parseInt(object.css("borderBottomWidth"), 10); //Total Border Width
    return value;
}

Answer 5

एक ही ब्राउज़र सीमा चौड़ाई के लिए स्ट्रिंग वापस कर सकते हैं, इस parseInt में NaN वापस आ जाएगी ताकि सुनिश्चित करें कि आप ठीक से इंट करने के लिए मान पार्स करते हैं।

        var getInt = function (string) {
            if (typeof string == "undefined" || string == "")
                return 0;
            var tempInt = parseInt(string);

            if (!(tempInt <= 0 || tempInt > 0))
                return 0;
            return tempInt;
        }

        var liWidth = $(this).width();
        liWidth += getInt($(this).css("padding-left"));
        liWidth += getInt($(this).css("padding-right"));
        liWidth += getInt($(this).css("border-left-width"));
        liWidth += getInt($(this).css("border-right-width"));

Answer 6

$(document).ready(function(){     
$("div.width").append($("div.width").width()+" px");
$("div.innerWidth").append($("div.innerWidth").innerWidth()+" px");   
$("div.outerWidth").append($("div.outerWidth").outerWidth()+" px");         
});


<div class="width">Width of this div container without including padding is: </div>  
<div class="innerWidth">width of this div container including padding is: </div> 
<div class="outerWidth">width of this div container including padding and margin is:     </div>

Comments

अपना उत्तर पोस्ट करने के लिए धन्यवाद! कृपया सेल्फ-प्रमोशन पर अक्सर पूछे जाने वाले प्रश्नों को ध्यान से पढ़ें । यह भी ध्यान दें कि यह आवश्यक है कि आप हर बार जब आप अपनी साइट / उत्पाद से लिंक करें तो एक अस्वीकरण पोस्ट करें।

— एंड्रयू बार्बर