JQuery এ উপাদানের মোট প্রস্থ (প্যাডিং এবং সীমানা সহ)

Question

বিষয় হিসাবে, কেউ কীভাবে কোনও jQuery ব্যবহার করে কোনও উপাদানটির সীমানা এবং প্যাডিং সহ মোট প্রশস্ততা পেতে পারেন? আমি jQuery মাত্রা প্লাগইন পেয়েছি, এবং .width()আমার 760px-wide, 10px paddingডিআইভির রিটার্নে চলছে 760।

সম্ভবত আমি কিছু ভুল করছি, তবে আমার উপাদানটি যদি নিজেকে প্রকাশ করে 780 pixels wideএবং ফায়ারব্যাগ আমাকে বলে যে 10px paddingএটি রয়েছে তবে কেবল কল করা 7 .width()gives০ দেয় তবে কীভাবে তা দেখতে আমার চাপ হবে hard

কোন পরামর্শের জন্য ধন্যবাদ।

Answer 1

[হালনাগাদ]

মূল উত্তরটি jQuery 1.3 এর আগে লেখা হয়েছিল এবং সেই ফাংশনগুলি ছিল যেগুলি তখন উপস্থিত ছিল যেখানে পুরো প্রস্থ গণনা করার জন্য তারা নিজেরাই পর্যাপ্ত ছিল না।

এখন, জেপি সঠিকভাবে বলেছে যে, jQuery এর বহির্মুখী এবং আউটারহাইটের ফাংশন রয়েছে যা এতে ডিফল্টরূপে অন্তর্ভুক্ত করে borderএবং যদি ফাংশনের প্রথম যুক্তিটি হয়paddingmargintrue

---

[আসল উত্তর]

widthপদ্ধতি আর দরকার dimensions, প্লাগইনটি কারণ এটি যোগ করা হয়েছেjQuery Core

আপনাকে যা করতে হবে তা হল নির্দিষ্ট ডিভের প্যাডিং, মার্জিন এবং সীমানা প্রস্থের মানগুলি পাওয়া এবং সেগুলি widthপদ্ধতির ফলাফলের সাথে যুক্ত করা add

এটার মতো কিছু:

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 বিশ্বাস করব। সমস্যাটি হ'ল প্রস্থ () ফাংশনটি আসলে "বক্স-সাইজিং: সীমান্ত-বাক্স" এর ক্ষেত্রে এটি কী করে তা নির্দিষ্ট করে না। আমি কেবল এটি পরীক্ষা করেছি এবং এটি প্যাডিং বাদ দিয়ে অভ্যন্তরীণ প্রস্থকে ফিরিয়ে দেয় This এটি সঠিক বা নাও হতে পারে; বিভিন্ন মানুষ বিভিন্ন জিনিস আশা করতে পারে। সুতরাং উপরে কোড নমুনা আসলে কাজ করে, তবে এটি সবচেয়ে নির্ভরযোগ্য উপায় নাও হতে পারে। অন্য কয়েকটি উত্তরে যেমন নির্দেশিত হয়েছে, আমি এর পরিবর্তে বহিরঙ্গন () ফাংশনটি ব্যবহার করার পরামর্শ দেব। এটি কমপক্ষে ডকুমেন্টেশনে যা করার কথা তা প্রতিশ্রুতি দেয়।

— জান জিচ

যখন আমি এই উত্তরটি লিখেছিলাম তখন বহির্মুখী / আউটআরহাইট ফাংশনটি বিদ্যমান ছিল না।

— আন্দ্রেয়াস গ্রেচ

আমার পুরানো কোড সম্পর্কে কেবলমাত্র একটি দ্রুত মন্তব্য, যদি কেউ এখনও এটি ব্যবহার করে; 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

দেখে মনে হচ্ছে বাইরেরউইথটি জ্যাকুরির সর্বশেষ সংস্করণে ভেঙে গেছে।

তারতম্য ঘটে যখন

বাইরের ডিভটি ভাসমান, অভ্যন্তরীণ ডিভের প্রস্থ সেট রয়েছে (বাইরের ডিভের চেয়ে ছোট) অভ্যন্তরের ডিভের স্টাইল = "মার্জিন: অটো" রয়েছে

Answer 4

কেবল সরলতার জন্য আমি অ্যান্ড্রেয়াস গ্রেচের দুর্দান্ত উত্তরটি কিছু কার্যক্রমে সজ্জিত করেছি। যারা খানিকটা কাট-পেস্ট সুখ চান want

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

একই ব্রাউজারগুলি সীমানা প্রস্থের জন্য স্ট্রিং ফিরে আসতে পারে, এই পার্সিতে এটি এনএএন ফিরে আসবে যাতে আপনার মানটি সঠিকভাবে পার্স করা হয় তা নিশ্চিত হন।

        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

আপনার উত্তর পোস্ট করার জন্য ধন্যবাদ! দয়া করে স্ব-প্রচারের এফএকিউ অবশ্যই মনোযোগ সহকারে পড়তে ভুলবেন না । এছাড়াও নোট করুন যে প্রতিবার আপনার নিজের সাইট / পণ্যের সাথে লিঙ্ক করার পরে আপনাকে একটি অস্বীকার পোস্ট করা আবশ্যক ।

— অ্যান্ড্রু বারবার