नंबर के रूप में सीएसएस शीर्ष मूल्य प्राप्त करें स्ट्रिंग के रूप में नहीं?

Question

JQuery में आप एक नंबर के रूप में माता-पिता के सापेक्ष शीर्ष स्थान प्राप्त कर सकते हैं, लेकिन अगर यह सेट किया गया था, तो आप एक नंबर के रूप में सीएसएस शीर्ष मूल्य प्राप्त नहीं कर सकते px।
कहो मैं निम्नलिखित है:

#elem{
  position:relative;
  top:10px;
 }

<div>
  Bla text bla this takes op vertical space....
  <div id='elem'>bla</div>
</div>

$('#elem').position().top; //Returns the number (10+(the vertical space took by the text))
$('#elem').css('top'); //Returns the string '10px'

लेकिन मैं संख्या के रूप में सीएसएस शीर्ष संपत्ति रखना चाहता हूं 10।
कोई इसे कैसे हासिल करेगा?

Answer 1

आप स्ट्रिंग को संख्या में बदलने के लिए parseInt () फ़ंक्शन का उपयोग कर सकते हैं, जैसे:

parseInt($('#elem').css('top'));

अद्यतन: (बेन द्वारा सुझाए अनुसार): आपको मूलांक भी देना चाहिए:

parseInt($('#elem').css('top'), 10);

इसे एक दशमलव संख्या के रूप में पार्स करने के लिए मजबूर किया जाता है, अन्यथा '0' से शुरू होने वाले तार को एक अष्टक संख्या के रूप में पार्स किया जा सकता है (उपयोग किए गए ब्राउज़र पर निर्भर हो सकता है)।

Comments

आपको मूलांक भी देना चाहिए: parseInt ($ ('# elem')। css ('टॉप'), 10); इसे आधार 10 के रूप में पार्स करने के लिए बाध्य किया जाता है, अन्यथा '0' से शुरू होने वाले तार बेस 8 में पार्स किए जाएंगे।

— बेन

यह एक फ्लोट हो सकता है, लेकिन यह parseFloat का उपयोग करने के लिए बेहतर है।

— Vsevolod Golovanov

Answer 2

M4N के उत्तर पर आधारित एक jQuery प्लगइन

jQuery.fn.cssNumber = function(prop){
    var v = parseInt(this.css(prop),10);
    return isNaN(v) ? 0 : v;
};

तो फिर आप संख्या मान प्राप्त करने के लिए इस विधि का उपयोग करें

$("#logo").cssNumber("top")

Answer 3

इवान कैस्टेलानोस के उत्तर (जो कि M4N के उत्तर पर आधारित था) पर आधारित एक थोड़ा और व्यावहारिक / कुशल प्लगइन। का उपयोग करते हुए|| 0परीक्षण चरण के बिना नैन को 0 में परिवर्तित देगा।

मैंने इरादा उपयोग के अनुरूप फ्लोट और इंट वैरिएशन भी प्रदान किए हैं:

jQuery.fn.cssInt = function (prop) {
    return parseInt(this.css(prop), 10) || 0;
};

jQuery.fn.cssFloat = function (prop) {
    return parseFloat(this.css(prop)) || 0;
};

उपयोग:

$('#elem').cssInt('top');    // e.g. returns 123 as an int
$('#elem').cssFloat('top');  // e.g. Returns 123.45 as a float

Http://jsfiddle.net/TrueBlueAussie/E5LTu/ पर टेस्ट फिडेल

Comments

ऐसा लगता है कि व्यक्ति को या तो हमेशा cssFloat का उपयोग करना चाहिए या विचार करना चाहिए कि cssInt 25.9999999px से 25 तक का मान छीन लेगा।

— justingordon

@justingordon: यह एक इंट के लिए सही पूर्णांक छंटनी व्यवहार है, इसलिए यह वास्तव में मूल्य के आवश्यक उपयोग के लिए नीचे आता है।

— कोडिंग हुई