JQuery के साथ CSS संपत्ति का सिर्फ संख्यात्मक हिस्सा कैसे प्राप्त करें?

Question

मुझे सीएसएस गुणों के आधार पर एक संख्यात्मक गणना करने की आवश्यकता है। हालाँकि, जब मैं जानकारी प्राप्त करने के लिए इसका उपयोग करता हूं:

$(this).css('marginBottom')

यह '10px' मान लौटाता है। वहाँ सिर्फ मूल्य की संख्या हिस्सा हो रही करने के लिए एक चाल कोई फर्क नहीं पड़ता कि क्या यह है pxया %या emया जो कुछ भी?

Answer 1

यह स्ट्रिंग से सभी गैर-अंकों, गैर-डॉट्स और नॉट-माइनस-साइन को साफ करेगा:

$(this).css('marginBottom').replace(/[^-\d\.]/g, '');

नकारात्मक मूल्यों के लिए अद्यतन

Comments

यह बहुत अच्छा है बशर्ते आप नकारात्मक संख्याओं से निपट नहीं रहे हों। मैं कोई रेगेक्स गुरु नहीं हूं इसलिए बेहतर नमूना उपलब्ध नहीं करा सकता हूं :)

— गैरी

ParseFloat का उपयोग करने पर विचार करें जो फ्लोटिंग पॉइंट नंबरों में अनुमत सभी वर्णों को संभालता है और स्ट्रिंग के बजाय एक नंबर भी लौटाता है - मैक्सिमेलेब्रेटन का उत्तर देखें ।

— ओलिवर

यह स्वीकृत उत्तर नहीं होना चाहिए क्योंकि यह प्रश्न का सही उत्तर नहीं देता है। ParseFloat / parseInt समाधान बेहतर हैं। प्रश्न संख्यात्मक गणना के संबंध में पूछता है । यह उत्तर एक स्ट्रिंग देता है। इसका मतलब है कि "20" + 20 = "2020" जो शामिल किसी के लिए भी अच्छा नहीं है।

— मस्ताबेला

@zakovyrya आप इस्तेमाल किया RegExp/[^-\d\.]/g

— अलेक्जेंडर

@ अलेक्जेंडर स्क्वायर कोष्ठक का मतलब नहीं है: [^ <जो भी आप यहां डालते हैं>]। इस regex में यह किसी भी प्रतीक से मेल खाता है जो शून्य से हस्ताक्षर, अंक या डॉट नहीं है। अनिवार्य रूप से सब कुछ हटा देता है जो संख्या का हिस्सा नहीं हो सकता है

— 21:39 पर zakovyrya

Answer 2

parseInt($(this).css('marginBottom'), 10);

parseInt स्वचालित रूप से इकाइयों की अनदेखी करेगा।

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

var marginBottom = "10px";
marginBottom = parseInt(marginBottom, 10);
alert(marginBottom); // alerts: 10

Comments

यह उन सभी मामलों में बहुत अच्छी तरह से काम करता है जो मैंने ठोकर खाई हैं, और मुझे यह किसी भी regexp समाधान की तुलना में बहुत अधिक पठनीय लगता है।

— मार्कस अमलथी मैग्नसोन

यदि आप इस समाधान का उपयोग कर रहे हैं तो आप parseInt में मूलांक (10) को जोड़ना चाह सकते हैं।

— asawilliams

आप उस मामले के लिए खाते के बजाय parseFloat का उपयोग करना चाह सकते हैं parseIntजहां आपको एक गैर-पूर्णांक मान प्राप्त होता है - जैसा कि मैक्सिमेलेब्रेटन के उत्तर में है ।

— ओलिवर

दरअसल, parseInt को ", 10" मूलांक पैरामीटर की आवश्यकता नहीं है, क्योंकि 10 डिफ़ॉल्ट है। कम पैरा = बेहतर पठनीयता, कम कोड, कम बग।

— सूचक नल

10 केवल parseInt के लिए डिफ़ॉल्ट है यदि संख्या को एक अष्टक के रूप में व्याख्या नहीं किया जा सकता है (उदाहरण के लिए '0700' 700 के बजाय 448 के रूप में पार्स करेगा, जो संभवतः वांछित है)।

— रॉबर्ट सी। बर्थ

Answer 3

प्रतिस्थापित विधि के साथ, आपका सीएसएस मान एक स्ट्रिंग है, और एक संख्या नहीं है।

यह विधि अधिक साफ, सरल है, और एक नंबर लौटाती है:

parseFloat($(this).css('marginBottom'));

Comments

यह सबसे अच्छा समाधान है, क्योंकि ओपी संभव गैर-पूर्णांक इकाइयों ( %, em) के लिए पूछ रहा है

— आंद्रे फिगएरेडो

Answer 4

parseFloat($(this).css('marginBottom'))

भले ही मार्जिनबॉटम को एम में परिभाषित किया गया हो, ऊपर पार्सफ्लोट के अंदर का मूल्य पीएक्स में होगा, क्योंकि यह एक गणना सीएसएस संपत्ति है।

Comments

parseFloat का केवल एक तर्क है - आपके द्वारा यहां दिया गया मूलांक (10) अनदेखा किया जाएगा। तो अधिक सही उत्तर मैक्सिमेलेब्रटन होगा ।

— ओलिवर

क्या इसे पार्सफ्लोट ($ (यह) .css ('मार्जिनबॉटम'), 10) होना चाहिए

— user1736947

Answer 5

$(this).css('marginBottom').replace('px','')

Comments

यह केवल 'px' केस को हैंडल करेगा। इसलिए मुझे लगता है कि शेष 'प्रत्ययों' में से प्रत्येक के लिए एक अलग प्रतिस्थापन किया जाना चाहिए।

— ग्रेजेगोरज ओल्दज़की

सावधान रहें - अन्य प्रत्यय पिक्सेल में नहीं हैं, इसलिए यदि आप उम्मीद करते हैं pxलेकिन दिए गए हैंem आपको बदलने की आवश्यकता है।

— एरियल

यही मैं सोच रहा था - क्या इसके लिए कोई लाइब्रेरी रूटीन है? जैसे मुझे लगता है कि यह पीएक्स की उम्मीद करने के लिए एक बहुत ही उचित स्थिति है, लेकिन मजबूती के प्रयोजनों के लिए, हमारे विकल्प क्या हैं ...? (बस मस्किंग, यहाँ - मैं इसे बहुत परेशान नहीं करने जा रहा हूं क्योंकि मैं मूल्यों को नियंत्रित करता हूं)

— lol

Answer 6

मैं किसी एकल CSS संपत्ति के संख्यात्मक मान को वापस करने के लिए एक साधारण jQuery प्लगइन का उपयोग करता हूं।

यह parseFloatjQuery के डिफ़ॉल्ट द्वारा लौटाए गए मान पर लागू होता हैcss विधि ।

प्लगइन परिभाषा:

$.fn.cssNum = function(){
  return parseFloat($.fn.css.apply(this,arguments));
}

उपयोग:

var element = $('.selector-class');
var numericWidth = element.cssNum('width') * 10 + 'px';
element.css('width', numericWidth);

Answer 7

हमें मान लें कि आपके पास 20px / 20% / 20em के लिए मार्जिन-नीचे संपत्ति सेट है। एक संख्या के रूप में मूल्य प्राप्त करने के लिए दो विकल्प हैं:

विकल्प 1:

parseInt($('#some_DOM_element_ID').css('margin-bottom'), 10);

ParseInt () फ़ंक्शन एक स्ट्रिंग को पार्स करता है और एक पूर्णांक देता है। उपरोक्त फ़ंक्शन में पाए गए 10 को मत बदलो ("मूलांक" के रूप में जाना जाता है) जब तक कि आपको पता नहीं है कि आप क्या कर रहे हैं।

उदाहरण आउटपुट होगा: 20% (यदि px में मार्जिन-बॉटम सेट)% और उन्हें यह वर्तमान पेरेंट एलीमेंट / फ़ॉन्ट आकार के आधार पर संबंधित संख्या को आउटपुट करेगा।

विकल्प 2 (मैं व्यक्तिगत रूप से इस विकल्प को पसंद करता हूं)

parseFloat($('#some_DOM_element_ID').css('margin-bottom'));

उदाहरण आउटपुट होगा: 20% (यदि px में मार्जिन-बॉटम सेट)% और उन्हें यह वर्तमान पेरेंट एलीमेंट / फ़ॉन्ट आकार के आधार पर संबंधित संख्या को आउटपुट करेगा।

ParseFloat () फ़ंक्शन एक स्ट्रिंग को पार्स करता है और एक फ्लोटिंग पॉइंट नंबर देता है।

ParseFloat () फ़ंक्शन निर्धारित करता है कि निर्दिष्ट स्ट्रिंग में पहला वर्ण एक संख्या है। यदि यह है, तो यह स्ट्रिंग को तब तक पार्स करता है जब तक यह संख्या के अंत तक नहीं पहुंचता है, और संख्या को स्ट्रिंग के रूप में नहीं, बल्कि एक संख्या के रूप में लौटाता है।

विकल्प 2 का लाभ यह है कि यदि आप दशमलव संख्या लौटाते हैं (जैसे 20.32322px) तो आपको दशमलव बिंदु के पीछे के मानों के साथ वापस लौटा दिया जाएगा। उपयोगी अगर आपको विशिष्ट संख्याओं की आवश्यकता है, उदाहरण के लिए यदि आपका मार्जिन-नीचे ईएम या % में सेट है

Answer 8

parseintकिसी भी दशमलव मान को छोटा कर देगा (उदाहरण 1.5emदेता है)1 )।

replaceRegex जैसे के साथ एक फ़ंक्शन का प्रयास करें

$this.css('marginBottom').replace(/([\d.]+)(px|pt|em|%)/,'$1');

Answer 9

आईडी के लिए जाना:

Math.abs(parseFloat($(this).css("property")));

Comments

जेनेरिक समाधान नहीं। ज्यादातर मामलों में, मुझे लगता है, मैं एक marginनकारात्मक या सकारात्मक जानना चाहता हूं !

— आंद्रे फिग्यूएरेडो

Answer 10

इकाइयों के बिना तत्व की चौड़ाई प्राप्त करने का सबसे सरल तरीका है:

target.width()

स्रोत: https://api.jquery.com/width/#width2

Comments

चौड़ाई और ऊंचाई के लिए बढ़िया। $ (चयनकर्ता)। उपलब्धता () और $ (चयनकर्ता) .height () वास्तव में संख्याएं हैं। अन्य सीएसएस प्रॉप्स के लिए उपयोगी नहीं: मार्जिन, पैडिंग।

— कल्प

Answer 11

आप इसे बहुत ही सरल jQuery प्लगइन लागू कर सकते हैं :

प्लगइन परिभाषा:

(function($) {
   $.fn.cssValue = function(p) {
      var result;
      return isNaN(result = parseFloat(this.css(p))) ? 0 : result;
   };
})(jQuery);

यह उन NaNमूल्यों के लिए प्रतिरोधी है जो पुराने IE संस्करण में हो सकते हैं (बदले में वापस आ जाएंगे 0)

उपयोग:

$(this).cssValue('marginBottom');

का आनंद लें! :)

Comments

यह एक अच्छा विचार है, लेकिन आवश्यकता से अधिक अज्ञात लागत के एक फ़ंक्शन को कॉल करने जैसे दुष्प्रभावों के लिए बाहर देखना याद रखें। var result; return isNaN(result = parseFloat(this.css(p))) ? 0 : result;

— निकोल

Answer 12

स्वीकार किए गए उत्तर का उपयोग करने में सुधार के लिए:

Number($(this).css('marginBottom').replace(/[^-\d\.]/g, ''));

Answer 13

यदि यह "px" के लिए है तो आप इसका उपयोग भी कर सकते हैं:

$(this).css('marginBottom').slice(0, -2);

Answer 14

दशमलव को संरक्षित करते हुए इकाइयों को हटा देना चाहिए।

var regExp = new RegExp("[a-z][A-Z]","g");
parseFloat($(this).css("property").replace(regExp, ""));

Answer 15

उपयोग

$(this).cssUnit('marginBottom');

जो एक सरणी लौटाता है। पहला इंडेक्स मार्जिन बॉटम वैल्यू (उदाहरण 20x के लिए 20 ) और दूसरा इंडेक्स रिटर्न मार्जिन बॉटम यूनिट (उदाहरण पीएक्स फॉर 20px)

Comments

cssUnit वास्तव में jQueryUI का हिस्सा है, jQuery का नहीं।

— cvkline