JQuery ব্যবহার করে পূর্ণসংখ্যা হিসাবে পিক্সেলগুলিতে প্যাডিং বা মার্জিন মান

207

jQuery এর উচ্চতা () এন প্রস্থ () ফাংশন রয়েছে যা পিক্সেলগুলিতে উচ্চতা বা প্রস্থকে পূর্ণসংখ্যা হিসাবে প্রদান করে ...

আমি কীভাবে পিক্সেলগুলিতে এবং jQuery ব্যবহার করে পূর্ণসংখ্যা হিসাবে কোনও মৌলের প্যাডিং বা মার্জিন মান পেতে পারি ?

আমার প্রথম ধারণাটি নিম্নলিখিতগুলি করা ছিল:

var padding = parseInt(jQuery("myId").css("padding-top"));

তবে উদাহরণস্বরূপ যদি প্যাডিংগুলি ইএমএসে দেওয়া হয় তবে আমি কীভাবে পিক্সেলগুলিতে মান পেতে পারি?

ক্রিস পেবলের প্রস্তাবিত জে সাইজেস প্লাগইনটি সন্ধান করে আমি বুঝতে পারি যে আমার নিজস্ব সংস্করণটি সঠিক ছিল :) :) jQuery রিটার্ন সবসময় পিক্সেল মধ্যে মান, সুতরাং এটি কেবল পূর্ণসংখ্যায় পার্স করা সমাধান ছিল।

ধন্যবাদ ক্রিস পেবল এবং ইয়ান রবিনসনকে

javascript jquery css

— মালিক আমুরলাইভ
সূত্র

আপনি দয়া করে নীচের উপলব্ধ উত্তরগুলির মধ্যে থেকে একটি উত্তর চয়ন করতে পারেন?

— ওয়েস মোডস

4

এই থ্রেড ব্যক্তিদের কাছেই একটি নোট: সবসময় র্যাডিক্স যখন আপনি ব্যবহার উল্লেখ parseInt। বরাত দিয়ে MDN: " Radix ।। যে উল্লেখ স্ট্রিং উপরোক্ত র্যাডিক্স (গাণিতিক সংখ্যা সিস্টেমের মধ্যে বেস) প্রতিনিধিত্ব করে 2 এবং 36 মধ্যে কোন int দশমিক সংখ্যা সিস্টেমের জন্য 10 উল্লেখ সর্বদা এই পরামিতি উল্লেখ পাঠক বিভ্রান্তির দূর করা ও আন্দাজের আচরণ গ্যারান্টি "যখন কোনও রেডিক্স নির্দিষ্ট না করা হয় তখন বিভিন্ন বাস্তবায়ন বিভিন্ন ফলাফল দেয়, সাধারণত মানটি 10 এ ডিফল্ট হয়" " দেখুন: ডেভেলপার.মোজিলা.আর.ইন-

— ইউএস

226

আপনার সিএসএস ব্যবহার করতে সক্ষম হওয়া উচিত ( http://docs.jquery.com/CSS/css#name )। আপনাকে আরও নির্দিষ্ট হতে পারে যেমন "প্যাডিং-বাম" বা "মার্জিন-শীর্ষ"।

উদাহরণ:

সিএসএস

a, a:link, a:hover, a:visited, a:active {color:black;margin-top:10px;text-decoration: none;}

জাতীয়

$("a").css("margin-top");

ফলাফল 10px।

আপনি যদি পূর্ণসংখ্যার মান পেতে চান তবে আপনি নিম্নলিখিতটি করতে পারেন:

parseInt($("a").css("margin-top"))

— আয়ান রবিনসন
সূত্র

5

জিকুয়ারি পদ্ধতিটি আসলে "পিএক্স" প্রত্যয়টি ফিরিয়ে দেয় কিনা তা আমি পরীক্ষা করে দেখিনি, তবে JSizesঅন্য উত্তর থেকে প্লাগইন (যা আমি ব্যবহার করে শেষ করেছি) ParseInt(...)কেবলমাত্র এফওয়াইআইতে ফেরতের মানটি পাস করার পরে একটি পূর্ণসংখ্যা ফেরত দেয় ।

— ড্যান হারবার্ট

12

এফওয়াইআই: jQuery 'px' যুক্ত করে, তাই ইয়ান এর সমাধান কাজ করে এবং পার্সিয়ান্ট () এ পাস করার সময় একটি পূর্ণসংখ্যাও ফিরে আসবে - এবং এটির জন্য প্লাগইন লাগবে না:parseInt($('a').css('margin-top').replace('px', ''))

— পিটার মরচে

56

পার্সিয়ান্ট

— ব্যাংক

17

যদি প্যাডিং / মার্জিনটি সিএসএসে এম বা পিটি হিসাবে প্রকাশিত হয়, তবে কি .css()শেষে "পিক্স" দিয়ে মানটি ফেরত দেবে?

— উপাদান_1593939

22

@ উপাদান_15939 - স্রেফ এটি চেষ্টা করে দেখুন এবং হ্যাঁ; এটি প্রকৃত পিক্সেল মান গণনা করে এবং px দিয়ে এটি প্রদান করে। সীমানা প্রস্থ একই। পুরানো প্রশ্ন আমি জানি, কিন্তু আপনার প্রশ্নের উত্তর কেউ না দিয়ে আমি ভেবেছিলাম আমি অন্যান্য

— প্রয়াতদের

79

মোট মার্জিন এবং প্যাডিং পেতে বাইরের এবং অভ্যন্তরীণ উচ্চতা / প্রস্থের তুলনা করুন:

var that = $("#myId");
alert(that.outerHeight(true) - that.innerHeight());

— svinto
সূত্র

দুর্দান্ত টিপ! আমাকে সাহায্য করেছে

— অ্যাবে পেট্রিলো

1

আমি বুঝতে পারিনি আউট হাইট অস্তিত্ব আছে। আপনাকে অনেক ধন্যবাদ!

— অ্যালেক্সমারলি-ফিঞ্চ

6

মনে রাখবেন যে আউটআর প্রস্থ / উচ্চতা সীমানা প্রস্থকেও অন্তর্ভুক্ত করে

— বৈদ্যুতিন

7

অভ্যন্তরীণ প্রস্থ / অভ্যন্তরীণ উচ্চতা প্যাডিং ছাড়াই প্রস্থ / উচ্চতা পেতে তাদের গণনাগুলিতে প্যাডিং অন্তর্ভুক্ত করে, আপনাকে .width () এবং। দৈর্ঘ্য () ব্যবহার করতে হবে। api.jquery.com/innerWidth api.jquery.com/width api.jquery.com/outerWidth

— অ্যান্ড্রু এনসলে

2

that.outerHeight(true) - that.outerHeight()মোট উল্লম্ব মার্জিন দেবে, কারণ আউটহাইট () প্যাডিংস এবং সীমানা অন্তর্ভুক্ত করবে তবে মার্জিনকে বাদ দেবে। Api.jquery.com/outerWidth/ দেখুন ।

— এক্সিমিলি

35

পার্সিয়ান্ট ফাংশনটিতে একটি "রেডিক্স" প্যারামিটার রয়েছে যা রূপান্তরটিতে ব্যবহৃত সংখ্যার সিস্টেমকে সংজ্ঞায়িত করে, তাই কল করা parseInt(jQuery('#something').css('margin-left'), 10);বাম মার্জিনটিকে পূর্ণসংখ্যা হিসাবে প্রদান করে।

এটি জেএসাইজ ব্যবহার করে।

— guigouz
সূত্র

3

এই জন্য ধন্যবাদ, আমি কার্যকারিতা ক্ষুদ্র টুকরা জন্য প্লাগইন অন্তর্ভুক্ত করা ঘৃণা করি।

— ব্রায়ান

2

এমনকি আপনার "রেডিক্স" পাশ করার দরকার নেই যেহেতু এটি 10 এর ডিফল্ট হয়

— আলেকজান্ডার বার্ড

5

সচেতন থাকুন যে পার্সেন্ট এনএন ফিরিয়ে দিতে পারে (যা তারপরে সেই ভেরিয়েবলের ভিত্তিতে গণনাগুলি ব্যর্থ করে দেয়) - পরে একটি ইসন ন্যাক যোগ করুন! উদাহরণ কেস: parseInt('auto', 10);( autoএকটি বৈধ margin-left)।

— টমাস

@ সেথ অ্যালেক্সান্দার বার্ডটি উল্লেখ করে আপনার সঠিক কথাটি উল্লেখ করুন যে রেডিক্সটি 10 এ ডিফল্ট হয়ে যাবে, তবে কোড লিটিংটি আপনার পক্ষে গুরুত্বপূর্ণ (এবং এটি সম্ভবত হওয়া উচিত) জেএসলিন্ট এবং জেএসহিন্ট আপনাকে ছেড়ে দিলে আপনার দিকে ঝাঁকুনির সৃষ্টি হবে।

— গ্রেগ

30

ইতিমধ্যে স্থানীয়ভাবে উপলভ্য এমন কিছু করতে দয়া করে অন্য লাইব্রেরি লোড করবেন না!

jQuery এর মধ্যে .css()% 's এবং ই.এম. তাদের পিক্সেল সমতুল্য দিয়ে শুরু করতে, এবং ধর্মান্তরিত parseInt()সরাবে 'px'ফিরে স্ট্রিংয়ের শেষ প্রান্ত থেকে এবং এটি একটি পূর্ণসংখ্যা রূপান্তর:

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
সূত্র

11

আপনি পার্শ্ববর্তী দিকগুলি কীভাবে পেতে পারেন তা এখানে:

var elem = $('#myId');

var marginTopBottom  = elem.outerHeight(true) - elem.outerHeight();
var marginLeftRight  = elem.outerWidth(true)  - elem.outerWidth();

var borderTopBottom  = elem.outerHeight() - elem.innerHeight();
var borderLeftRight  = elem.outerWidth()  - elem.innerWidth();

var paddingTopBottom  = elem.innerHeight() - elem.height();
var paddingLeftRight  = elem.innerWidth()  - elem.width();

মনোযোগ দিন যে প্রতিটি পরিবর্তনশীল, paddingTopBottomউদাহরণস্বরূপ, উপাদান উভয় পক্ষের মার্জিন যোগফল; যেমন paddingTopBottom == paddingTop + paddingBottom,। আমি ভাবছি তাদের আলাদাভাবে পাওয়ার কোনও উপায় আছে কিনা। অবশ্যই, যদি তারা সমান হয় তবে আপনি 2 :) দ্বারা ভাগ করতে পারেন

— FireAphis
সূত্র

true = মার্জিন অন্তর্ভুক্ত করুন। +1000 ইন্টারনেট

— গ্লিফ

এটি সর্বোত্তম সমাধান কারণ এটি কাজ করে IE 7। দেখুন: stackoverflow.com/questions/590602/...

— Leniel Maccaferri

9

এই সাধারণ কাজটি এটি করবে:

$.fn.pixels = function(property) {
    return parseInt(this.css(property).slice(0,-2));
};

ব্যবহার:

var padding = $('#myId').pixels('paddingTop');

— mpen
সূত্র

3

হিসাব নেই auto, inheritএবং %মান

— টমাস

3

@ থমাস: সত্য নয়। jsfiddle.net/nXyFN jQuery মনে হয়, সর্বদা পিক্সেলের ফলাফল প্রত্যাবর্তন করে।

— এমপেন

4

@ মার্ক jsfiddle.net/BNQ6S আই 7 : NaNএটি ব্রাউজারের উপর নির্ভর করে। যতদূর আমি জানি যে jQuery সাধারণভাবে .css()ভিন্ন হয় না .width()&.height()

— থমাস

1

@ থমাস: আকর্ষণীয়। আয়ানের সমাধান (শীর্ষ-রেটযুক্ত) এর পরেও একই সমস্যা রয়েছে। svinto এর সমাধান সম্ভবত সেরা।

— এমপেন

9

পার্স ইন

parseInt(canvas.css("margin-left"));

0 পিএক্স এর জন্য 0 প্রদান করে

— a53-416
সূত্র

9

আপনি যে কোনও সিএসএস অ্যাট্রিবিউটের মতোই এগুলি দখল করতে পারেন :

alert($("#mybox").css("padding-right"));
alert($("#mybox").css("margin-bottom"));

আপনি সেগুলি CSS পদ্ধতিতে একটি দ্বিতীয় বৈশিষ্ট্য সহ সেট করতে পারেন:

$("#mybox").css("padding-right", "20px");

সম্পাদনা: আপনার যদি কেবল পিক্সেল মান প্রয়োজন হয় তবে ব্যবহার করুন parseInt(val, 10):

parseInt($("#mybox").css("padding-right", "20px"), 10);

— রব গ্রান্ট
সূত্র

3

ঠিক আছে মূল প্রশ্নের উত্তর দিতে:

আপনি এর মতো ব্যবহারযোগ্য পূর্ণসংখ্যা হিসাবে প্যাডিংটি পেতে পারেন:

var padding = parseInt ($ ("myId")। CSS ("প্যাডিং-টপ")। প্রতিস্থাপন ("ইএমএস", ""));

আপনি যদি পিক্সের মতো অন্য কোনও পরিমাপের সংজ্ঞা দিয়েছেন তবে "ইএমএস" "পিক্স" দিয়ে প্রতিস্থাপন করুন। পার্সিয়ান্ট স্ট্রিং পার্টকে একটি ভুল মান হিসাবে ব্যাখ্যা করে তাই এর সাথে প্রতিস্থাপন করা গুরুত্বপূর্ণ ... কিছুই নয়।

— EeKay
সূত্র

2

আপনি jquery কাঠামো নিজেকে প্রসারিত করতে পারেন যেমন:

jQuery.fn.margin = function() {
var marginTop = this.outerHeight(true) - this.outerHeight();
var marginLeft = this.outerWidth(true) - this.outerWidth();

return {
    top: marginTop,
    left: marginLeft
}};

এর মাধ্যমে আপনার jquery অবজেক্টগুলিতে মার্জিন () নামে একটি ফাংশন যুক্ত করা হয় যা অফসেট ফাংশনটির মতো সংগ্রহ প্রদান করে।

FX।

$("#myObject").margin().top

— cralexns
সূত্র

2

দুর্ভাগ্যক্রমে এটি আপনাকে উপরের এবং বাম মার্জিনগুলি দেয় না, বরং মোট ভার্টিকাল এবং মোটহোরাইজেন্টাল মার্জিনগুলি

— কোড কমান্ডার

তবে এটি আরও একটি বিরামবিহীন উপস্থিত মার্জিন ফাংশনটিকে অনুমোদনের জন্য অন্যান্য সমাধানগুলির মধ্যে একটিতে পার্সেন্ট ফাংশন ব্যবহার করে সম্পাদনা করা যেতে পারে

— ব্রায়ান

1

স্ট্রিং.রেপ্লেস ("px", "")) ব্যবহার করবেন না;

ParseInt বা parseFloat ব্যবহার করুন!

— RubbelDeCatc
সূত্র

0

আমি সম্ভবত খুব আরামদায়ক উপায়ে প্যাডিং এবং মার্জিনের জন্য github.com/bramstein/jsizes jquery প্লাগইন ব্যবহার করি , ধন্যবাদ ...

— Mustafah
সূত্র

0

কুইক্রেডফক্স থেকে নির্লজ্জভাবে গৃহীত ।

jQuersy.fn.cssNum = function(){
    return parseInt(jQuery.fn.css.apply(this, arguments), 10);
};

হালনাগাদ

parseInt(val, 10)এটির চেয়ে দ্রুতগতিতে পরিবর্তন হয়েছে parseFloat।

http://jsperf.com/number-vs-plus-vs-toint-vs-tofloat/20

— yckart
সূত্র

0

নেক্রোতে নয় তবে আমি এটি তৈরি করেছি যা বিভিন্ন মানের উপর নির্ভর করে পিক্সেল নির্ধারণ করতে পারে:

$.fn.extend({
  pixels: function (property, base) {
    var value = $(this).css(property);
    var original = value;
    var outer = property.indexOf('left') != -1 || property.indexOf('right') != -1 
      ? $(this).parent().outerWidth()
      : $(this).parent().outerHeight();

    // EM Conversion Factor
    base = base || 16;

    if (value == 'auto' || value == 'inherit') 
        return outer || 0;

    value = value.replace('rem', '');
    value = value.replace('em', '');

    if (value !== original) {
       value = parseFloat(value);
       return value ? base * value : 0;
    }

    value = value.replace('pt', '');

    if (value !== original) {
       value = parseFloat(value);
       return value ? value * 1.333333 : 0; // 1pt = 1.333px
    }

    value = value.replace('%', '');

    if (value !== original) {
      value = parseFloat(value);
      return value ? (outer * value / 100) : 0;
    }

    value = value.replace('px', '');
    return parseFloat(value) || 0;
  }
});

এইভাবে, আমরা আকার দেওয়ার জন্য এবং স্বতঃ / উত্তরাধিকার হিসাবে বিবেচনা করি।

— Nijikokun
সূত্র

নোট যে parseInt()ভুল, প্রস্থ বা উচ্চতা ভাসমান পয়েন্ট হতে পারে।

— অ্যালেক্সিস উইল্ক