jQuery के तत्व मार्जिन और पैडिंग कैसे प्राप्त करें?

Question

बस सोच - कैसे 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/

Comments

stackoverflow.com/questions/590602/…

— आर्टेम पायनाख

कृपया नीचे दिए गए लिंक को देखें जो कुछ इसी तरह का है। stackoverflow.com/questions/590602/…

— प्रवीण

Answer 1

JQuery प्रलेखन के अनुसार , आशुलिपि सीएसएस गुण समर्थित नहीं हैं।

"कुल गद्दी" से आपका क्या मतलब है, इसके आधार पर आप ऐसा कुछ करने में सक्षम हो सकते हैं:

var $img = $('img');
var paddT = $img.css('padding-top') + ' ' + $img.css('padding-right') + ' ' + $img.css('padding-bottom') + ' ' + $img.css('padding-left');

Comments

हाँ लगता है कि आपको व्यक्तिगत रूप से प्रत्येक करना है :( जो बेकार है

— टॉम

इसे इस तरह से बाहर मत खींचो। क्या होगा यदि एक है autoया 2%या inherit?

— लाइट

@ दान - वास्तव में प्रयास दान की सराहना करते हैं। अधिक स्पष्ट नहीं करने के लिए क्षमा याचना :( अपना समय बर्बाद करने के लिए क्षमा करें।

— टॉम

आप गैर-संख्यात्मक मानों के बारे में सही हैं। मुझे लगता है कि डैन शॉर्ट का जवाब ज्यादा मजबूत है।

— एलियास ज़मरिया

अद्यतन : jQuery 1.9 के रूप में, .cs () के लिए शैली गुणों की एक सरणी गुजरने से संपत्ति-मूल्य जोड़े का एक उद्देश्य होगा। उदाहरण के लिए, सभी चार प्रदान किए गए बॉर्डर-चौड़ाई मानों को पुनः प्राप्त करने के लिए, आप उपयोग कर सकते हैं$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ]).

— हुसैन नाज़ल

Answer 2

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 एपीआई डॉक्स की जाँच करें:

• outerWidth
• innerWidth
• चौड़ाई

यहाँ संपादित jsFiddle परिणाम दिखा रहा है।

आप अपने मार्जिन, सीमा और पैडिंग प्राप्त करने के लिए हाइट के लिए एक ही प्रकार के ऑपरेशन कर सकते हैं।

Comments

यदि ऐसा है, तो आप गणना किए गए मानों को ले सकते हैं, 'px' जोड़ सकते हैं और आपको पिक्सेल मान मिल गए हैं।

— डेन शॉर्ट

आपको उस प्रश्न को स्पष्ट करने के लिए अपने प्रश्न को अपडेट करना होगा। अन्यथा हम उन समस्याओं के समाधान लिखने में समय बर्बाद कर रहे हैं जिन्हें आप हल करने की कोशिश नहीं कर रहे हैं :)। अपने प्रश्न में स्पष्ट रूप से बताएं कि आप क्या चाहते हैं। आप के लिए कहा की कुल मार्जिन और तत्व है, न कि व्यक्तिगत मार्जिन मूल्यों (जिसके लिए अलग हो सकता है की गद्दी margin-leftऔर margin-right, और हो सकता है emया px।

— दान लघु

यह है, लेकिन यह मेरा प्रश्न था, आपके मूल प्रश्न का संपादन नहीं था :)

— डैन शॉर्ट

यह बहुत उपयोगी है; यदि बाएं और दाएं मार्जिन / पेडिंग मान अलग-अलग हैं और आप चाहते हैं तो क्या करें, उदाहरण के लिए, बस बाएं मार्जिन या पेडिंग मान?

— jpap

शीर्ष से जुड़ा मार्जिन नहीं है heightनहीं width?

— जॉनके

Answer 3

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

Answer 4

यह मेरे लिए काम करता है:

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;

Answer 5

सीमा

मेरा मानना ​​है कि आप सीमा चौड़ाई का उपयोग कर प्राप्त कर सकते हैं .css('border-left-width')। आप शीर्ष, दाएं और नीचे भी ला सकते हैं और अधिकतम मान ज्ञात करने के लिए उनकी तुलना कर सकते हैं। यहां कुंजी यह है कि आपको एक विशिष्ट पक्ष निर्दिष्ट करना होगा।

गद्दी

Px में पूर्णांक के रूप में jQuery गणना पेडिंग-टॉप देखें

हाशिया

सीमा या गद्दी के रूप में एक ही तर्क का उपयोग करें।

वैकल्पिक रूप से, आप आउटरविद का उपयोग कर सकते हैं । छद्म कोड होना चाहिए
margin = (outerWidth(true) - outerWidth(false)) / 2। ध्यान दें कि यह केवल मार्जिन को क्षैतिज रूप से खोजने के लिए काम करता है। मार्जिन को लंबवत रूप से खोजने के लिए, आपको आउटहाइट का उपयोग करना होगा ।

Comments

मार्जिन के लिए आपकी रणनीति फ़ायरफ़ॉक्स में काम नहीं करती है, यह 0 हर बार वापस आएगा यदि आपके पास "ऑटो" क्षैतिज पैडिंग है, उदाहरण के लिए तत्व को केंद्र में करना।

— बेन Dilts

Answer 6

मेरे पास एक स्निपेट है जो दिखाता है कि, 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());
}

Answer 7

यदि आप जिस तत्व का विश्लेषण कर रहे हैं, उसमें कोई मार्जिन, सीमा या जो भी परिभाषित नहीं है, आप उसे वापस नहीं कर पाएंगे। सबसे ऊपर आप 'ऑटो' प्राप्त करने में सक्षम होंगे जो सामान्य रूप से डिफ़ॉल्ट है।

आपके उदाहरण से मैं देख सकता हूं कि आपके पास margTपरिवर्तनशील है। यकीन नहीं है कि अगर मार्जिन-टॉप पाने की कोशिश कर रहे हैं। अगर ऐसा है तो आपको इस्तेमाल करना चाहिए .css('margin-top')।

आप 'img' से शैलीकरण प्राप्त करने की कोशिश कर रहे हैं, जिसके परिणामस्वरूप (यदि आपके पास एक से अधिक है) तो एक सरणी में होगा।

आपको जो करना चाहिए वह .each()जक्वरी विधि का उपयोग करना है ।

उदाहरण के लिए:

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

    // Do something with margT
});

Answer 8

$('img').margin() or $('img').padding()

वापसी:

{bottom: 10 ,left: 4 ,top: 0 ,right: 5}

मूल्य प्राप्त करें:

$('img').margin().top

संपादित करें:

jquery प्लगइन का उपयोग करें: jquery.sizes.js

Comments

मुझे jQuery में कोई मार्जिन () फ़ंक्शन दिखाई नहीं देता है।

— ओरतमाला लोकनी