jQuery: jQuery এ লুকানো উপাদানের উচ্চতা পান

Question

আমাকে এমন একটি উপাদানের উচ্চতা পেতে হবে যা একটি ডিভের মধ্যে লুকানো থাকে। এখনই আমি ডিভিটি দেখাব, উচ্চতা পাবো, এবং পিতামহিক ডিভটি লুকিয়ে রাখব। এটা কিছুটা নির্বোধ মনে হচ্ছে। একটি ভাল উপায় আছে কি?

আমি jQuery 1.4.2 ব্যবহার করছি:

$select.show();
optionHeight = $firstOption.height(); //we can only get height if its visible
$select.hide();

Comments

+1 আপনার উদাহরণ সমাধানটি উত্তরগুলির মধ্যে যে কোনওটির চেয়ে আসলে ভাল better

— টিম সান্টফোর্ড

আমি টিমের সাথে একমত নই। এই সমাধানের সাথে একটি সম্ভাবনা রয়েছে যে ডিসপ্লেটি ঝাঁকুনিতে পড়তে পারে কারণ আপনি আসলে আইটেমটি প্রদর্শন করছেন এবং তারপরে এটি আড়াল করছেন। যদিও নিক সলিউশনটি আরও সংশ্লেষিত, তবে পিতামহিক ডিভিটি কখনই প্রদর্শিত না হওয়ায় এটির ডিসপ্লের ঝাঁকুনির কোনও সম্ভাবনা নেই।

— হামফ্রে

jQuery এর

— ডকম্যাক্স

সম্পর্কিত: stackoverflow.com/questions/3632120/…

— নিক

হ্যারি, আপনি যা খুঁজে পেয়েছিলেন তা হ'ল আপনার কোড আইই তে কাজ করে না, এই সমাধান নয় solution আপনার কোডটি ডিবাগ করুন :)

— গ্যাভিন

Answer 1

আপনি এর মতো কিছু করতে পারেন, কিছুটা হ্যাকি যদিও positionএটি ইতিমধ্যে পরম হলে ভুলে যান :

var previousCss  = $("#myDiv").attr("style");

$("#myDiv").css({
    position:   'absolute', // Optional if #myDiv is already absolute
    visibility: 'hidden',
    display:    'block'
});

optionHeight = $("#myDiv").height();

$("#myDiv").attr("style", previousCss ? previousCss : "");

Comments

আমি উপরের কোডটি একটি জিকিউ প্লাগইন jsbin.com/ihakid/2 এ একীকরণ করেছি । আমি একটি ক্লাসও ব্যবহার করি এবং পিতা বা মাতাও লুকানো আছে কিনা তা পরীক্ষা করে দেখি।

— hitautodestruct

+1 এটি দুর্দান্ত কাজ করে। ঠিক মনে রাখবেন উপাদানটির পিতামাতাকেও অবশ্যই প্রদর্শন করা উচিত। এটি আমাকে কয়েক মিনিটের জন্য বিভ্রান্ত করেছিল। এছাড়াও, যদি উপাদানটি থাকে তবে position:relativeআপনি অবশ্যই এটির পরিবর্তে সেট করতে চাইবেন static।

— মাইকেল মায়ার

আপনি যখন এই পদ্ধতিটি ব্যবহার করেন, লক্ষ্য উপাদানটি প্রায়শই আকার পরিবর্তন করতে পারে। সুতরাং ডিভের একেবারে অবস্থান যখন উচ্চতা এবং / অথবা প্রস্থ পাওয়া খুব দরকারী নাও হতে পারে।

— জেরেমি রিকিটস 21

@ গ্যাভিন এটি রিফ্লো গণনা এবং ব্যবহারকারীর কাছে কোনও ঝাঁকুনি প্রতিরোধ করে, সুতরাং এটি সস্তা এবং কম অনুপ্রবেশযোগ্য উভয়ই।

— নিক ক্র্যাভার

@ হাইটাডোডস্ট্রাক্ট, আপনার উপাদানটি আসলে লুকানো আছে তা পরীক্ষা করতে আমি আপনার ক্যোয়ারী প্লাগইনটি পরিবর্তন করেছি mod jsbin.com/ihakid/58

— প্রসাদ

Answer 2

লুকানো উপাদানগুলির প্রস্থ পেয়ে আমি একই সমস্যায় পড়েছিলাম, তাই আমি ঠিক করেছি এই প্লাগইন কলটি jQuery প্রকৃত লিখেছি । পরিবর্তে ব্যবহার

$('#some-element').height();

ব্যবহার

$('#some-element').actual('height');

লুকানো উপাদানটির জন্য আপনাকে সঠিক মান দেবে বা উপাদানটির একটি গোপন অভিভাবক রয়েছে।

সম্পূর্ণ ডকুমেন্টেশন এখানে দেখুন । পৃষ্ঠাটিতে একটি ডেমো অন্তর্ভুক্ত রয়েছে।

আশা করি এই সাহায্য :)

Comments

হ্যাঁ এটি সাহায্য করে! 2015 এবং এটি এখনও সহায়তা করে। আপনি প্রকৃত ওয়েবসাইটে "jquery এর পুরানো সংস্করণ" বলছেন - তবে - এটি এখনও v2.1.3 এ প্রয়োজনীয়, কমপক্ষে এটি আমার পরিস্থিতিতে ছিল।

— এলপিলরিচ

ধন্যবাদ! আমি এই প্লাগইনটি উপাদানগুলির উচ্চতা পড়তে এবং সেট করতে ব্যবহার করি (এটি ডায়নামিকভাবে করা হয়) অ্যাকর্ডিয়ানের মধ্যে গোপনে লুকানো হয়

— alds

দুর্দান্ত প্লাগইন! আমি কোনও মডেলের অভ্যন্তরে একটি ডিভের প্রস্থ 100% সেট করার সময় সমস্ত কিছুর চেষ্টা করেছি এবং কিছুই কাজ করে না। এটি 5 সেকেন্ডে সেট আপ করুন এবং পুরোপুরি কাজ করলেন!

— ক্রেগ হাওল

@ বেন লিঙ্কটি নষ্ট হয়ে গেছে।

— শচীন প্রসাদ

Answer 3

আপনি দুটি সিএসএস শৈলী, প্রদর্শন শৈলী এবং দৃশ্যমানতার স্টাইলকে বিভ্রান্ত করছেন ।

যদি উপাদানটি দৃশ্যমানতার CSS স্টাইল সেট করে গোপন করা হয়, তবে উপাদানটি দৃশ্যমান কিনা তা নির্বিশেষে আপনার উচ্চতা পেতে সক্ষম হওয়া উচিত কারণ উপাদানটি এখনও পৃষ্ঠাটিতে স্থান নেয় ।

যদি ডিসপ্লে সিএসএস স্টাইলকে "কোনও নয়" এ পরিবর্তন করে আড়াল করে রাখা হয়, তবে উপাদানটি পৃষ্ঠায় স্থান নেয় না এবং আপনাকে এটির জন্য একটি স্টাইল প্রদর্শন করতে হবে যার ফলে উপাদানটি কিছু জায়গাতে রেন্ডার হতে পারে at কোন পয়েন্ট, আপনি উচ্চতা পেতে পারেন।

Comments

এর জন্য ধন্যবাদ. আমার সমস্যা একটি টেবিল সেল জড়িত, এবং সেটিং visibilityথেকে hiddenআমার সমস্যার সমাধান হল না, কিন্তু এটা আমার সেটে ধারণা দিয়েছেন position: fixed; top: 100%এবং এটি একটি যাদুমন্ত্র মত কাজ করে!

— জয়েন

এখন আমি বুঝতে পারি কেন এটির উচ্চতা প্রদর্শন সহ প্রদর্শিত হচ্ছে না: কোনও উপাদান নেই। চমত্কার ব্যাখ্যার জন্য অনেক ধন্যবাদ।

— ফ্রেনকিবি

Answer 4

আমি এর সাথে সময়ে সময়ে ডিল করার জন্য কিছুটা কৌতূহল নিয়েছিলাম। আমি একটি jQuery স্ক্রোলবার উইজেট তৈরি করেছি যেখানে আমি এমন সমস্যার মুখোমুখি হয়েছি যে স্ক্রোলযোগ্য সামগ্রীটি মার্কআপের কোনও গোপন অংশের অংশ কিনা তা আমার আগে জানা ছিল না। আমি যা করেছি তা এখানে:

// try to grab the height of the elem
if (this.element.height() > 0) {
    var scroller_height = this.element.height();
    var scroller_width = this.element.width();

// if height is zero, then we're dealing with a hidden element
} else {
    var copied_elem = this.element.clone()
                      .attr("id", false)
                      .css({visibility:"hidden", display:"block", 
                               position:"absolute"});
    $("body").append(copied_elem);
    var scroller_height = copied_elem.height();
    var scroller_width = copied_elem.width();
    copied_elem.remove();
}

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

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

Comments

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

— মেলিগি

Answer 5

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

এটি এখানে পাওয়া যাবে: http://jsbin.com/ikogez/3/

হালনাগাদ

আমি এই ছোট্ট প্লাগইনটিকে সম্পূর্ণরূপে নতুনভাবে ডিজাইন করেছি কারণ এটি প্রমাণিত হয়েছে যে পূর্ববর্তী সংস্করণটি (উপরে উল্লিখিত) বাস্তব জীবনের পরিবেশে সত্যিকারের ব্যবহারযোগ্য ছিল না যেখানে প্রচুর DOM হেরফের ঘটছিল।

এটি নিখুঁতভাবে কাজ করছে:

/**
 * getSize plugin
 * This plugin can be used to get the width and height from hidden elements in the DOM.
 * It can be used on a jQuery element and will retun an object containing the width
 * and height of that element.
 *
 * Discussed at StackOverflow:
 * http://stackoverflow.com/a/8839261/1146033
 *
 * @author Robin van Baalen <[e-mail]>
 * @version 1.1
 * 
 * CHANGELOG
 *  1.0 - Initial release
 *  1.1 - Completely revamped internal logic to be compatible with javascript-intense environments
 *
 * @return {object} The returned object is a native javascript object
 *                  (not jQuery, and therefore not chainable!!) that
 *                  contains the width and height of the given element.
 */
$.fn.getSize = function() {    
    var $wrap = $("<div />").appendTo($("body"));
    $wrap.css({
        "position":   "absolute !important",
        "visibility": "hidden !important",
        "display":    "block !important"
    });

    $clone = $(this).clone().appendTo($wrap);

    sizes = {
        "width": $clone.width(),
        "height": $clone.height()
    };

    $wrap.remove();

    return sizes;
};

Comments

আপনার কোডটি সঠিক নয়। আপনি প্রয়োজনsizes = {"width": $wrap.width(), "height": $wrap.height()};this মূল আইটেম, যা দৃশ্যমান নয় উল্লেখ করে।

— জ্যাকজয়

@ জ্যাকজয়ে আমি এই কোডটি বেশ কিছুদিন ধরেই সমস্যা ছাড়াই ব্যবহার করে আসছি। সর্বোপরি আমি বলব যে আমার 'এটি' এর পরিবর্তে ক্লোন.উইথ () প্রয়োজন। মোড়ানো নয়, যেহেতু আমি মোড়কের অভ্যন্তরের উপাদানটির আকার চাই। আবরণটি 10000x10000px হতে পারে যখন আমি যে উপাদানটি পরিমাপ করতে চাই তা এখনও উদাহরণস্বরূপ 30x40px।

— রবিন ভ্যান বালেন

এমনকি লক্ষ্যগুলিও $wrapঠিক আছে (কমপক্ষে আমার পরীক্ষায়)। আমি চেষ্টা করেছিলাম thisএবং স্পষ্টতই এটি আকারটি ধরতে পারে না কারণ thisএখনও লুকানো উপাদানকে বোঝায়।

— জ্যাকজয়

ধন্যবাদ @ জ্যাকজয় আমি এখন কোড উদাহরণটি আপডেট করেছি।

— রবিন ভ্যান বালেন

Answer 6

নিকের উত্তর সম্পর্কে আরও বিল্ডিং:

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'});
optionHeight = $("#myDiv").height();
$("#myDiv").css({'position':'static','visibility':'visible', 'display':'none'});

আমি এটি করাকে ভাল বলে পেয়েছি:

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'});
optionHeight = $("#myDiv").height();
$("#myDiv").removeAttr('style');

সিএসএস অ্যাট্রিবিউটস সেট করা তাদের ইনলাইন inোকাবে, যা আপনার সিএসএস ফাইলে আপনার থাকা অন্য কোনও বৈশিষ্ট্যকে ওভাররাইট করবে। এইচটিএমএল উপাদানটিতে শৈলীর বৈশিষ্ট্যটি সরিয়ে দিয়ে, সবকিছু স্বাভাবিক অবস্থায় ফিরে আসে এবং এখনও লুকানো থাকে, কারণ এটি প্রথম স্থানে লুকানো ছিল।

Comments

$("#myDiv").css({'position':'absolute','visibility':'hidden', 'display':'block'}); optionHeight = $("#myDiv").height(); $("#myDiv").css({'position':'','visibility':'', 'display':''});

— হারুন

... যদি না আপনার উপাদানটিতে ইতিমধ্যে ইনলাইন স্টাইল থাকে। আপনি যদি jQuery এর সাথে উপাদানটি লুকিয়ে রাখেন তবে কেস হবে।

— মুহাদ

Answer 7

আপনি ডিসপ্লেটি ব্যবহার করার পরিবর্তে নেতিবাচক মার্জিনের সাহায্যে পর্দার বাইরে লুকানো ডিভিও অবস্থান রাখতে পারেন: কোনও কিছুই, টেক্সট ইনডেন্ট চিত্র প্রতিস্থাপনের কৌশলটির মতো নয়।

যেমন।

position:absolute;
left:  -2000px;
top: 0;

এইভাবে উচ্চতা () এখনও উপলব্ধ।

Answer 8

আমি লুকানো উপাদানগুলির জন্য কার্যকারী ফাংশন সন্ধান করার চেষ্টা করি তবে আমি বুঝতে পারি যে সিএসএস প্রত্যেকের চেয়ে অনেক জটিল। সিএসএস 3 এ প্রচুর নতুন লেআউট কৌশল রয়েছে যা পূর্ববর্তী সমস্ত উত্তরের মতো নমনীয় বাক্স, গ্রিড, কলাম বা জটিল প্যারেন্ট উপাদানগুলির মধ্যে এমনকি উপাদানটির জন্য কাজ না করে।

ফ্লেক্সিবক্স উদাহরণ

আমি মনে করি একমাত্র টেকসই এবং সহজ সমাধান হ'ল রিয়েল-টাইম রেন্ডারিং । সেই সময়ে, ব্রাউজারে আপনাকে সেই সঠিক উপাদানটির আকার দেওয়া উচিত ।

দুঃখের বিষয়, জাভাস্ক্রিপ্ট উপাদান প্রদর্শিত বা লুকানো হয়েছে তা অবহিত করার জন্য কোনও সরাসরি ইভেন্ট সরবরাহ করে না। যাইহোক, আমি ডিওএম অ্যাট্রিবিউট মোডিফাইড এপিআইয়ের উপর ভিত্তি করে কিছু ফাংশন তৈরি করেছি যা কলমের পিছনে ফাংশন কার্যকর করবে যখন উপাদানটির দৃশ্যমানতা পরিবর্তন হবে।

$('[selector]').onVisibleChanged(function(e, isVisible)
{
    var realWidth = $('[selector]').width();
    var realHeight = $('[selector]').height();

    // render or adjust something
});

আরও তথ্যের জন্য, দয়া করে আমার প্রকল্প গিটহাব দেখুন at

https://github.com/Soul-Master/visible.event.js

ডেমো: http://jsbin.com/ETiGIre/7

Comments

আপনার উত্তরের জন্য ধন্যবাদ. এটি আমাকে মিউটেশনঅবার্সারগুলিও ব্যবহার করতে অনুপ্রাণিত করেছিল। তবে লক্ষ্য করুন যে আপনার গ্রন্থাগারটি বিশিষ্ট পরিবর্তনের কারণে ঘটে যাওয়া দৃশ্যমান পরিবর্তনের জন্য কেবল এটি পরীক্ষা করে style( এখানে 59 লাইনটি দেখুন ) এবং classবৈশিষ্ট্যের পরিবর্তনগুলির কারণে দৃশ্যমানতার পরিবর্তনগুলিও ঘটতে পারে ।

— আশরাফ সাবরি

তুমি ঠিক বলছো. সঠিক বিবৃতিটি e.attributeName হওয়া উচিত! == 'শৈলী' && e.attributeName! == 'শ্রেণীর নাম'

— সোল_মাস্টার

Answer 9

নিক ক্র্যাভারের সমাধান অনুসরণ করে, উপাদানটির দৃশ্যমানতা সেট করা এটিকে সঠিক মাত্রা পেতে দেয়। আমি খুব প্রায়ই এই সমাধান ব্যবহার করেছি। যাইহোক, শৈলীগুলি ম্যানুয়ালি পুনরায় সেট করার পরে, আমি এই জটিলটি খুঁজে পেতে এসেছি, বিকাশের মাধ্যমে আমার সিএসএসে উপাদানটির প্রাথমিক অবস্থান / প্রদর্শনের পরিবর্তন করে, আমি প্রায়শই সম্পর্কিত জাভাস্ক্রিপ্ট কোড আপডেট করতে ভুলে যাই। নিম্নলিখিত কোডটি প্রতি কথায় স্টাইলগুলি পুনরায় সেট করে না, তবে জাভাস্ক্রিপ্ট দ্বারা যুক্ত ইনলাইন স্টাইলগুলি সরিয়ে দেয়:

$("#myDiv")
.css({
    position:   'absolute',
    visibility: 'hidden',
    display:    'block'
});

optionHeight = $("#myDiv").height();
optionWidth = $("#myDiv").width();

$("#myDiv").attr('style', '');

এখানে কেবল অনুমানটি হ'ল এখানে অন্যান্য ইনলাইন শৈলী থাকতে পারে না অন্যথায় সেগুলিও সরানো হবে। তবে এখানে সুবিধাটি হ'ল যে উপাদানগুলির শৈলীগুলি তারা CSS স্টাইলশিটে যা ছিল তা ফিরিয়ে দেওয়া হয়েছে। ফলস্বরূপ, আপনি এটিকে একটি ফাংশন হিসাবে লিখতে পারেন যেখানে কোনও উপাদান পাস হয়ে যায় এবং উচ্চতা বা প্রস্থ ফিরে আসে।

জেএসের মাধ্যমে স্টাইলগুলি ইনলাইন সেট করার ক্ষেত্রে আমি খুঁজে পেয়েছি এমন আরেকটি সমস্যা হ'ল CSS3 এর মাধ্যমে ট্রানজিশনের সময়, আপনি আপনার শৈলীর নিয়মের ওজনকে একটি ইনলাইন শৈলীর চেয়ে শক্তিশালী করতে মানিয়ে নিতে বাধ্য হন, যা কখনও কখনও হতাশ হতে পারে।

Answer 10

সংজ্ঞা অনুসারে, কোনও উপাদানটি দৃশ্যমান হলেই তার উচ্চতা থাকে।

শুধু কৌতূহলী: আপনার কোনও লুকানো উপাদানের উচ্চতা কেন দরকার?

একটি বিকল্প হ'ল কার্যকরভাবে কোনও উপাদানটিকে পিছনে রেখে (জেড-ইনডেক্স ব্যবহার করে) কোনও ধরণের ওভারলে রেখে।

Comments

আমার একটি উপাদানের উচ্চতা প্রয়োজন, এটির দৈর্ঘ্য যখন আমি তার উচ্চতা চাই তখন লুকানো থাকে। আমি একটি প্লাগইন তৈরি করছি এবং এটি শুরু করার সাথে সাথে আমার কিছু তথ্য সংগ্রহ করা দরকার

— mkoryak

জাভাস্ক্রিপ্টের সাথে জিনিসগুলি কেন্দ্রীভূত করার অন্য একটি কারণ হ'ল যা এখনও দৃশ্যমান নয়

— সাইমন_উইভার

@ ক্লেটাস যদি আপনি কৌতূহলী হন তবে মন্তব্যগুলি লিখুন, এটি কোনও লুকানো উপাদানটির আকার পেতে সীমান্ত কোডিংয়ের ক্ষেত্রে প্রায়শই পরিস্থিতি হয়।

— রন্তিভ

Answer 11

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

var $content = $('.content'),
    contentHeight = $content.height(),
    contentWidth = $content.width(),
    $closestHidden,
    styleAttrValue,
    limit = 20; //failsafe

if (!contentHeight) {
    $closestHidden = $content;
    //if the main element itself isn't hidden then roll through the parents
    if ($closestHidden.css('display') !== 'none') { 
        while ($closestHidden.css('display') !== 'none' && $closestHidden.size() && limit) {
            $closestHidden = $closestHidden.parent().closest(':hidden');
            limit--;
        }
    }
    styleAttrValue = $closestHidden.attr('style');
    $closestHidden.css({
        position:   'absolute',
        visibility: 'hidden',
        display:    'block'
    });
    contentHeight = $content.height();
    contentWidth = $content.width();

    if (styleAttrValue) {
        $closestHidden.attr('style',styleAttrValue);
    } else {
        $closestHidden.removeAttr('style');
    }
}

প্রকৃতপক্ষে, এটি গ্রেগরির উন্নত পদ্ধতিটি আপনাকে ব্যবহার করতে নিক, গ্রেগরি এবং আইলিডলেসনেস এর প্রতিক্রিয়াগুলির সংমিশ্রণ, তবে আপনি যে স্টাইল অ্যাট্রিবিউটটিতে ফিরে যেতে চান তাতে কিছু আছে বলে মনে হয় এবং উভয় পদ্ধতিই ব্যবহার করে একটি মূল উপাদান।

আমার সমাধানটির সাথে আমার একমাত্র গ্রিপ হ'ল পিতা-মাতার মাধ্যমে লুপ সম্পূর্ণ দক্ষ নয়।

Answer 12

একটি কার্যপ্রণালী হ'ল আপনি যে উপাদানটির উচ্চতা পেতে চান তার বাইরে একটি পিতামাতার ডিভ তৈরি করা, '0' এর উচ্চতা প্রয়োগ করুন এবং কোনও ওভারফ্লো লুকিয়ে রাখুন। এরপরে, শিশু উপাদানটির উচ্চতা নিন এবং পিতামাতার ওভারফ্লো সম্পত্তিটি সরান।

var height = $("#child").height();
// Do something here
$("#parent").append(height).removeClass("overflow-y-hidden");

.overflow-y-hidden {
  height: 0px;
  overflow-y: hidden;
}

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

<div id="parent" class="overflow-y-hidden">
  <div id="child">
    This is some content I would like to get the height of!
  </div>
</div>

Answer 13

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

// Correctly calculate dimensions of hidden elements
(function($) {
    var originals = {},
        keys = [
            'width',
            'height',
            'innerWidth',
            'innerHeight',
            'outerWidth',
            'outerHeight',
            'offset',
            'scrollTop',
            'scrollLeft'
        ],
        isVisible = function(el) {
            el = $(el);
            el.data('hidden', []);

            var visible = true,
                parents = el.parents(),
                hiddenData = el.data('hidden');

            if(!el.is(':visible')) {
                visible = false;
                hiddenData[hiddenData.length] = el;
            }

            parents.each(function(i, parent) {
                parent = $(parent);
                if(!parent.is(':visible')) {
                    visible = false;
                    hiddenData[hiddenData.length] = parent;
                }
            });
            return visible;
        };

    $.each(keys, function(i, dimension) {
        originals[dimension] = $.fn[dimension];

        $.fn[dimension] = function(size) {
            var el = $(this[0]);

            if(
                (
                    size !== undefined &&
                    !(
                        (dimension == 'outerHeight' || 
                            dimension == 'outerWidth') &&
                        (size === true || size === false)
                    )
                ) ||
                isVisible(el)
            ) {
                return originals[dimension].call(this, size);
            }

            var hiddenData = el.data('hidden'),
                topHidden = hiddenData[hiddenData.length - 1],
                topHiddenClone = topHidden.clone(true),
                topHiddenDescendants = topHidden.find('*').andSelf(),
                topHiddenCloneDescendants = topHiddenClone.find('*').andSelf(),
                elIndex = topHiddenDescendants.index(el[0]),
                clone = topHiddenCloneDescendants[elIndex],
                ret;

            $.each(hiddenData, function(i, hidden) {
                var index = topHiddenDescendants.index(hidden);
                $(topHiddenCloneDescendants[index]).show();
            });
            topHidden.before(topHiddenClone);

            if(dimension == 'outerHeight' || dimension == 'outerWidth') {
                ret = $(clone)[dimension](size ? true : false);
            } else {
                ret = $(clone)[dimension]();
            }

            topHiddenClone.remove();
            return ret;
        };
    });
})(jQuery);

Comments

চোখের পলকহীনতার উত্তরটি আমার যা প্রয়োজন তার জন্য নিখুঁত দেখায় তবে আমি যে jQuery চালাচ্ছি তার সাথে কাজ করে না: 1.3.2 এটি jQuery কে এই ক্রাউনকে ফেলে দেয় (বা খুব কাছের কিছু) কোনও ফাংশন নয়। এটি ঠিক করার জন্য কারও কোনও ধারণা আছে?

Answer 14

আপনি যদি পৃষ্ঠায় ইতিমধ্যে উপাদানটি প্রদর্শন করেছেন তবে আপনি সরাসরি ডিওএম উপাদান থেকে উচ্চতা নিতে পারেন (। Jget (0) দিয়ে jQuery এ পৌঁছনযোগ্য), কারণ উপাদানটি লুকানো থাকলেও এটি সেট করা রয়েছে:

$('.hidden-element').get(0).height;

প্রস্থের জন্য একই:

$('.hidden-element').get(0).width;

(সংশোধনের জন্য স্কিটিস ওরিলিকে ধন্যবাদ)

Comments

রিটার্নসundefined

— জ্যাক উইলসন

খুব নিশ্চিত যে আপনি ইতিমধ্যে পৃষ্ঠায় উপাদানটি ইতিমধ্যে প্রদর্শিত হলে এটি কেবলমাত্র কাজ করে। সবসময় থাকা উপাদানগুলির জন্য display='none', এটি কাজ করবে না।

— স্কেটিস