jQuery এলিমেন্টের মার্জিন এবং প্যাডিং কীভাবে পাবেন?

105

শুধু ভাবছি - কীভাবে jQuery ব্যবহার করছি - আমি মোট প্যাডিং এবং মার্জিন ইত্যাদি উপাদানগুলির বিন্যাস পেতে পারি? যেমন 30px 30px 30px 30px বা 30px 5px 15px 30px ইত্যাদি

আমি চেষ্টা করেছিলাম

var margT = jQuery('img').css('margin');
var bordT = jQuery('img').css('border');
var paddT = jQuery('img').css('padding');

কিন্তু এই কাজ করে না? http://jsfiddle.net/q7Mra/

jquery  padding  margin 
— টম
সূত্র
— Artem Pyanykh
নীচের লিঙ্কটি দেখুন যা কিছু অনুরূপ। stackoverflow.com/questions/590602/…
— প্রবীণ

উত্তর:

105

JQuery ডকুমেন্টেশন অনুসারে , শর্টহ্যান্ড সিএসএস বৈশিষ্ট্যগুলি সমর্থিত নয়।

"মোট প্যাডিং" বলতে আপনার বোঝার উপর নির্ভর করে আপনি এই জাতীয় কিছু করতে সক্ষম হতে পারেন:

var $img = $('img');
var paddT = $img.css('padding-top') + ' ' + $img.css('padding-right') + ' ' + $img.css('padding-bottom') + ' ' + $img.css('padding-left');
— ইলিয়াস জামারিয়া
সূত্র
হ্যাঁ মনে হচ্ছে আপনাকে পৃথকভাবে প্রতিটি করতে হবে :( যা সফল হয়
— টম
27
এটিকে এভাবে টানবেন না। কি হবে যদি এক autoবা 2%বা inherit?
— অরবিটে লাইটনেস রেস
@ ড্যান - ড্যানের প্রচেষ্টার সত্যই প্রশংসা করুন। সে বিষয়ে পরিষ্কারভাবে বর্ণনা না আপনার সময় নষ্ট করতে আরো :( দুঃখিত ক্ষমাপ্রার্থী।
— টম
3
আপনি সংখ্যাসূচক মান সম্পর্কে সঠিক। আমি মনে করি ড্যান শর্টের উত্তরটি আরও দৃ .়।
— ইলিয়াস জামারিয়া
4
আপডেট : jQuery 1.9 হিসাবে, শৈলীর বৈশিষ্ট্যগুলির একটি অ্যারে .css () এ পাস করার ফলে সম্পত্তি-মান জুটির একটি অবজেক্ট তৈরি হবে। উদাহরণস্বরূপ, চারটি প্রদত্ত সীমানা-প্রস্থের মানগুলি পুনরুদ্ধার করতে আপনি ব্যবহার করতে পারেন$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).
— হুসেন নাজল
193 
var bordT = $('img').outerWidth() - $('img').innerWidth();
var paddT = $('img').innerWidth() - $('img').width();
var margT = $('img').outerWidth(true) - $('img').outerWidth();

var formattedBord = bordT + 'px';
var formattedPadd = paddT + 'px';
var formattedMarg = margT + 'px';

প্রতিটি তথ্যের জন্য jQuery API ডক্স পরীক্ষা করুন:

এখানে সম্পাদিত জেএসফিডাল ফলাফল দেখায়' s

আপনি উচ্চতার মার্জিন, সীমানা এবং প্যাডিং পেতে একই ধরণের ক্রিয়াকলাপ সম্পাদন করতে পারেন।

— ড্যান শর্ট
সূত্র
1
যদি এটি হয় তবে আপনি গণনা করা মানগুলি নিতে পারেন, 'px' যুক্ত করতে পারেন এবং পিক্সেলের মানগুলি পেয়েছেন।
— ড্যান শর্ট
2
এটি পরিষ্কার করার জন্য আপনাকে আপনার প্রশ্ন আপডেট করতে হবে। অন্যথায় আমরা যে সমস্যার সমাধান করতে চাইছি না তার সমাধান লেখার জন্য সময় নষ্ট করছি। আপনার প্রশ্নের ঠিক কী কী ফেরতের মান চান তা ব্যাখ্যা করুন Exp আপনি চাইলেন মোট মার্জিন এবং উপাদান, না পৃথক মার্জিন মান (যার জন্য আলাদা হতে পারে এর প্যাডিং margin-leftএবং margin-right, এবং হতে পারে emবা px।
— ড্যান সংক্ষিপ্ত
2
এটি হ'ল, তবে এটিই ছিল আপনার প্রশ্নের আমার সম্পাদনা, আপনার আসল প্রশ্ন নয় :)
— ড্যান শর্ট
4
এটি খুব দরকারী; যদি বাম এবং ডান মার্জিন / প্যাডিংয়ের মানগুলি আলাদা হয় এবং আপনি যেমন উদাহরণস্বরূপ, কেবল বাম মার্জিন বা প্যাডিং মান চান তবে কী করবেন?
— jpap
1
উপরের মার্জিনটি কি এর সাথে সংযুক্ত heightনয় width?
— JohnK
16

jQuery.css()সিএসএস নিজেই এগুলিতে, বা শতাংশ হিসাবে বা যাই হোক না কেন সেগুলি নির্দিষ্ট করে, এমনকি মাপগুলি পিক্সেলগুলিতে দেয়। এটি ইউনিটগুলিকে সংযোজন করে ('px'), তবে তবুও আপনি parseInt()এগুলিকে পূর্ণসংখ্যায় রূপান্তর করতে ব্যবহার করতে পারেন (বা parseFloat(), যেখানে পিক্সেলের ভগ্নাংশটি বোঝায়)।

http://jsfiddle.net/BXnXJ/

    $(document).ready(function () {
    var $h1 = $('h1');
    console.log($h1);
    $h1.after($('<div>Padding-top: ' + parseInt($h1.css('padding-top')) + '</div>'));
    $h1.after($('<div>Margin-top: ' + parseInt($h1.css('margin-top')) + '</div>'));
});
— RavenHursT
সূত্র
3

এটি আমার পক্ষে কাজ করে:

var tP = $("img").css("padding").split(" ");
var Padding = {
    Top: tP[0] != null ? parseInt(tP[0]) : 0,
    Right: tP[1] != null ? parseInt(tP[1]) : (tP[0] != null ? parseInt(tP[0]) : 0),
    Bottom: tP[2] != null ? parseInt(tP[2]) : (tP[0] != null ? parseInt(tP[0]) : 0),
    Left: tP[3] != null ? parseInt(tP[3]) : (tP[1] != null ? parseInt(tP[1]) : (tP[0] != null ? parseInt(tP[0]) : 0))
};

ফলাফল উদাহরণ:

Object {Top: 5, Right: 8, Bottom: 5, Left: 8}

মোট করতে:

var TotalPadding = Padding.Top + Padding.Right + Padding.Bottom + Padding.Left;
— Brutus
সূত্র
2

সীমান্ত

আমি বিশ্বাস করি আপনি ব্যবহার করে সীমানা প্রস্থ পেতে পারেন .css('border-left-width')। আপনি শীর্ষ, ডান এবং নীচে আনতে এবং সর্বাধিক মান সন্ধান করতে তাদের তুলনা করতে পারেন। এখানে কীটি আপনাকে একটি নির্দিষ্ট দিক নির্দিষ্ট করতে হবে।

প্যাডিং

Px এ পূর্ণসংখ্যা হিসাবে jQuery গণনা প্যাডিং-শীর্ষ দেখুন

মার্জিন

সীমানা বা প্যাডিংয়ের মতো একই যুক্তি ব্যবহার করুন।

বিকল্পভাবে, আপনি বহির্মুখ ব্যবহার করতে পারেন । সিউডো কোডটি হওয়া উচিত
margin = (outerWidth(true) - outerWidth(false)) / 2। মনে রাখবেন এটি কেবলমাত্র অনুভূমিকভাবে মার্জিন সন্ধানের জন্য কাজ করে। উল্লম্বভাবে মার্জিনটি সন্ধান করতে আপনার আউটআর হাইট ব্যবহার করতে হবে ।

— simshaun
সূত্র
মার্জিনের জন্য আপনার কৌশলটি ফায়ারফক্সে কাজ করে না, আপনার কাছে "অটো" অনুভূমিক প্যাডিং থাকলে উদাহরণস্বরূপ উপাদানটি কেন্দ্র করে যদি এটি প্রতিবার 0 ফেরত আসবে।
— বেন দিল্টস
2

আমার একটি স্নিপেট রয়েছে যা দেখায়, কীভাবে jQuery এর সাথে উপাদানগুলির স্পেসিংগুলি পাবেন: 

/* messing vertical spaces of block level elements with jQuery in pixels */

console.clear();

var jObj = $('selector');

for(var i = 0, l = jObj.length; i < l; i++) {
  //jObj.eq(i).css('display', 'block');
  console.log('jQuery object:', jObj.eq(i));
  console.log('plain element:', jObj[i]);

  console.log('without spacings                - jObj.eq(i).height():         ', jObj.eq(i).height());
  console.log('with padding                    - jObj[i].clientHeight:        ', jObj[i].clientHeight);
  console.log('with padding and border         - jObj.eq(i).outerHeight():    ', jObj.eq(i).outerHeight());
  console.log('with padding, border and margin - jObj.eq(i).outerHeight(true):', jObj.eq(i).outerHeight(true));
  console.log('total vertical spacing:                                        ', jObj.eq(i).outerHeight(true) - jObj.eq(i).height());
}
— আন্দ্রিয়াস
সূত্র
0

আপনি যে উপাদানটি বিশ্লেষণ করছেন তার যদি কোনও প্রান্তিকতা, সীমানা বা যা নির্ধারণ করা না থাকে তবে আপনি এটিকে ফেরত দিতে পারবেন না। শীর্ষে আপনি 'অটো' পেতে সক্ষম হবেন যা সাধারণত ডিফল্ট।

আপনার উদাহরণ থেকে আমি দেখতে পাচ্ছি যে আপনার margTমতো চলক রয়েছে। মার্জিন-টপ পাওয়ার চেষ্টা করছেন কিনা তা নিশ্চিত নন। যদি এমনটি হয় তবে আপনার ব্যবহার করা উচিত .css('margin-top')।

আপনি 'ইম্জি' থেকে স্টাইলাইজেশন পেতে চেষ্টা করছেন যা ফলাফলের (যদি আপনার একের বেশি থাকে) অ্যারেতে আসে in

আপনার যা করা উচিত তা হল .each()jquery পদ্ধতিটি ব্যবহার করা ।

উদাহরণ স্বরূপ:

jQuery('img').each(function() {
    // get margin top
    var margT = jQuery(this).css('margin-top');

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