JQuery का उपयोग करके पूर्णांक के रूप में पिक्सेल में पैडिंग या मार्जिन मान

Question

jQuery की ऊँचाई () एन चौड़ाई () फ़ंक्शंस है जो पिक्सेल में ऊँचाई या चौड़ाई पूर्णांक के रूप में देता है ...

मुझे पिक्सल में और jQuery का उपयोग करके पूर्णांक के रूप में एक तत्व का एक गद्दी या मार्जिन मूल्य कैसे मिल सकता है ?

मेरा पहला विचार निम्नलिखित कार्य करना था:

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

लेकिन यदि उदाहरण के लिए ईएमडी में पैडिंग दी जाती है, तो मुझे पिक्सल में मूल्य कैसे मिल सकता है?

---

क्रिस पेबल द्वारा सुझाए गए JSizes प्लगइन में देखकर मुझे एहसास हुआ कि मेरा अपना संस्करण सही था :)। jQuery रिटर्न हमेशा पिक्सेल में मूल्य रखता है, इसलिए इसे पूर्णांक में पार्स करना ही समाधान था।

क्रिस पेबल और इयान रॉबिन्सन को धन्यवाद

Comments

क्या आप नीचे उपलब्ध उत्तरों में से उत्तर चुन सकते हैं?

— वेस मोड्स

इस धागे में लोगों के लिए एक नोट: हमेशा रेडिक्स निर्दिष्ट करें जब आप उपयोग करते हैं parseInt। एमडीएन का हवाला देते हुए: " मूलांक 2 और 36 के बीच एक अंतर जो उपर्युक्त स्ट्रिंग के मूलांक (गणितीय अंक प्रणाली में आधार) का प्रतिनिधित्व करता है, दशमलव अंक प्रणाली के लिए 10 निर्दिष्ट करें। हमेशा पाठक भ्रम को खत्म करने और अनुमानित व्यवहार की गारंटी के लिए इस पैरामीटर को निर्दिष्ट करें । जब एक मूलांक निर्दिष्ट नहीं होता है, तो अलग-अलग कार्यान्वयन अलग-अलग परिणाम देते हैं, आमतौर पर मान को डिफ़ॉल्ट रूप से 10. " देखें: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

— दिनांक

Answer 1

आपको सीएसएस ( 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"))

Comments

मैंने यह नहीं जांचा है कि क्या jQuery विधि वास्तव में "px" प्रत्यय लौटाती है या नहीं, हालांकि JSizesअन्य उत्तर से प्लगइन (जो मैंने उपयोग किया था) एक पूर्णांक देता है जब रिटर्न मान पास होता है ParseInt(...), बस FYI करें।

— दान हर्बर्ट

FYI करें: jQuery 'px' जोड़ता है, इसलिए इयान का समाधान काम करता है और पार्सइंट () में पास होने पर एक पूर्णांक भी लौटाएगा - और इसके लिए प्लगइन की आवश्यकता नहीं है:parseInt($('a').css('margin-top').replace('px', ''))

— पीटर रस्ट

parseInt तेजी से क्रोम पर ( 'पिक्सल' '') की जगह 49% से है jsperf.com/replace-vs-parseint

— बैंक

यदि सीएसएस में पैडिंग / मार्जिन को एमएम या पीटी के रूप में व्यक्त किया जाता है, तो क्या .css()अंत में "पीएक्स" के साथ मूल्य वापस आ जाएगा?

— ingredient_15939

@ संघटक_१५ ९ ३ ९ - बस कोशिश की और हाँ; यह वास्तविक पिक्सेल मान की गणना करता है और इसे px के साथ लौटाता है। बॉर्डर चौड़ाई के लिए भी। पुराना सवाल जो मुझे पता है, लेकिन जैसा कि किसी ने भी आपके सवाल का जवाब नहीं दिया, मुझे लगा कि मैं इसे अन्य

— स्वर्गीयों की

Answer 2

कुल मार्जिन और पैडिंग प्राप्त करने के लिए बाहरी और आंतरिक ऊंचाई / चौड़ाई की तुलना करें:

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

Comments

महान टिप! मेरी मदद की

— अबे पेट्रिलो

मुझे नहीं पता था कि बाहरीहाइट एक्सटेंडेड है। आपका बहुत बहुत धन्यवाद!

— एलेक्समॉर्ली-फिंच

याद रखें कि आउटरविद / हाइट में बॉर्डर की चौड़ाई भी शामिल है

— इलेक्ट्रिक्हेड

innertWidth / innerHeight में उनकी गणना में पैडिंग भी शामिल है, पैडिंग के बिना चौड़ाई / ऊँचाई प्राप्त करने के लिए, आपको एक्सपोज़र () और .height () का उपयोग करने की आवश्यकता है। api.jquery.com/innerWidth api.jquery.com/width api.jquery.com/outerWidth

— एंड्रयू एनस्ले

that.outerHeight(true) - that.outerHeight()कुल ऊर्ध्वाधर मार्जिन देगा, क्योंकि आउटरहाइट () में पैडिंग और बॉर्डर शामिल होंगे, लेकिन मार्जिन को छोड़कर। Api.jquery.com/outerWidth/ देखें ।

— एसेसिली

Answer 3

पार्सइंट फ़ंक्शन में एक "रेडिक्स" पैरामीटर होता है जो रूपांतरण पर उपयोग किए जाने वाले अंक प्रणाली को परिभाषित करता है, इसलिए कॉलिंग parseInt(jQuery('#something').css('margin-left'), 10);एक मार्जिन के रूप में बाएं मार्जिन को लौटाता है।

यह वह है जो JSFS उपयोग करता है।

Comments

इसके लिए धन्यवाद, मुझे कार्यक्षमता के छोटे टुकड़ों के लिए प्लगइन्स को शामिल करने से नफरत है।

— ब्रायन

आपको "मूलांक" को पास करने की आवश्यकता नहीं है क्योंकि यह चूक के लिए 10.

— अलेक्जेंडर बर्ड

ध्यान रखें कि parseInt NaN को वापस कर सकता है (जो तब बदले में उस चर के आधार पर गणना कर सकता है) - बाद में एक isNaN चेक जोड़ें! उदाहरण के मामले: parseInt('auto', 10);( autoएक वैध है margin-left)।

— थॉमस

@sethAlexanderBird यह बताते हुए कि आपका मूलांक 10 में डिफ़ॉल्ट होगा, सही होगा, हालांकि अगर कोड लिनेटिंग आपके लिए महत्वपूर्ण है (और शायद यह होना चाहिए) jsLint और jsHint आपको छोड़ देगा अगर आप बाहर निकलते हैं।

— ग्रेग

Answer 4

कृपया पहले से ही मूल रूप से उपलब्ध कुछ करने के लिए एक और पुस्तकालय लोड न करें!

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>'));
});

Answer 5

यहां बताया गया है कि आप आस-पास के डेमोंशन कैसे प्राप्त कर सकते हैं:

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 से विभाजित कर सकते हैं :)

Comments

true = मार्जिन शामिल करें। +1000 इंटर्नेट

— ग्लिफ़

यह सबसे अच्छा समाधान है क्योंकि यह भी काम करता है IE 7। देखें: stackoverflow.com/questions/590602/…

— लेनियल मैकाफेर्री

Answer 6

यह सरल कार्य करेगा:

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

उपयोग:

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

Comments

खाते में नहीं है auto, inheritऔर %मान

— थॉमस

@ थोमस: सच नहीं है। jsfiddle.net/nXyFN jQuery पिक्सल में परिणाम को हमेशा के लिए वापस करने लगता है।

— मपेन २२'१२

@ मर्क jsfiddle.net/BNQ6S IE7:, NaNयह ब्राउज़र पर निर्भर करता है। जहाँ तक मुझे पता है कि jQuery .css()विपरीत नहीं है .width()और.height()

— थॉमस

@ थोमस: दिलचस्प। इयान के समाधान (टॉप-रेटेड) में भी यही समस्या है। svinto का समाधान शायद सबसे अच्छा है।

— मपेन २३'१२

Answer 7

पार्स इंट

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

0px के लिए 0 रिटर्न

Answer 8

आप बस उन्हें किसी भी सीएसएस विशेषता के साथ पकड़ सकते हैं :

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);

Answer 9

मूल प्रश्न का उत्तर देना ठीक है:

आप इस तरह एक प्रयोग करने योग्य पूर्णांक के रूप में गद्दी प्राप्त कर सकते हैं:

var गद्दी = parseInt ($ ("myId")। css ("गद्दी-शीर्ष")। प्रतिस्थापित करें ("ems", ""));

यदि आपने px जैसा एक और माप परिभाषित किया है तो बस "ems" को "px" से बदलें। parseInt स्ट्रिंगर को एक गलत मान के रूप में व्याख्या करता है, इसलिए इसे महत्वपूर्ण है ... कुछ भी नहीं।

Answer 10

तुम भी कुछ के साथ अपने आप को 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

Comments

दुर्भाग्य से यह आपको शीर्ष और बाएँ हाशिये पर नहीं देता, बल्कि कुल मिलाकर और कुल क्षैतिज मार्जिन

— कोड कमांडर

हालाँकि इसे अन्य समाधानों में पार्सइंट फ़ंक्शन का उपयोग करके संपादित किया जा सकता है ताकि अधिक सहज दिखने वाले मार्जिन फ़ंक्शन की अनुमति दी जा सके

— ब्रायन

Answer 11

String.replace ("px", "") का उपयोग न करें);

ParseInt या parseFloat का उपयोग करें!

Answer 12

मैं शायद बहुत आरामदायक तरीके से पैडिंग और मार्जिन के लिए github.com/bramstein/jsizes jquery प्लगइन का उपयोग करता हूं , धन्यवाद ...

Answer 13

जल्दी से Quickredfox से अपनाया गया ।

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

Answer 14

Necro के लिए नहीं, लेकिन मैंने इसे बनाया जो विभिन्न प्रकार के मूल्यों के आधार पर पिक्सेल निर्धारित कर सकता है:

$.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;
  }
});

इस तरह, हम साइजिंग और ऑटो / इनहेरिट के लिए ध्यान में रखते हैं।

Comments

ध्यान दें कि parseInt()गलत है, चौड़ाई या ऊँचाई फ़्लोटिंग पॉइंट हो सकती है।

— एलेक्सिस विल्के