.Net () () द्वारा लौटाए गए गोल मान को कैसे नहीं बनाया जाए?

Question

मैंने चारों ओर खोज की है और यह नहीं मिला। मैं एक div की चौड़ाई प्राप्त करने की कोशिश कर रहा हूँ, लेकिन अगर यह एक दशमलव बिंदु है तो यह संख्या को गोल करता है।

उदाहरण:

#container{
    background: blue;
    width: 543.5px;
    height: 20px;
    margin: 0;
    padding: 0;
}

अगर मैं ऐसा $('#container').width();करता हूं तो 543.5 के बजाय 543 वापस कर दूंगा। मैं यह कैसे प्राप्त कर सकता हूं कि संख्या को राउंड न किया जाए और पूर्ण 543.5 (या जो भी संख्या हो) वापस कर दें।

Comments

आप दशमलव पिक्सेल चौड़ाई क्यों रख रहे हैं? वे पूरी संख्या में वैसे भी गोल हो जाते हैं। आपके पास आधा पिक्सेल नहीं हो सकता।

— मोईन ज़मन

आप इसकी आवश्यकता क्यों है? उस जानकारी के बिना, यह प्रश्न व्यर्थ है।

— जुआन मेंडेस

@JuanMendes मेरे मामले में, HiDPI प्रदर्शन पर, Chrome 38 एक गैर-पूर्णांक विंडो चौड़ाई की गणना करता है। इसलिए, यदि $। रिचार्ज का दौर चलता है, तो कहें, 1250.6 से 1251, और मैं 1251 के आधार पर गणना करता हूं, मुझे समस्याएं हैं। राउंडिंग नीचे एक मुद्दे के रूप में ज्यादा नहीं है।

— जेकेएस

Answer 1

Element.getBoundingClientRectतत्व की शैली के बजाय मूल का उपयोग करें । यह IE4 में पेश किया गया था और सभी ब्राउज़रों द्वारा समर्थित है:

$("#container")[0].getBoundingClientRect().width

नोट: IE8 और नीचे के लिए, एमडीएन डॉक्स में "ब्राउज़र संगतता" नोट्स देखें ।

$("#log").html(
  $("#container")[0].getBoundingClientRect().width
);

#container {
    background: blue;
    width: 543.5px;
    height: 20px;
    margin: 0;
    padding: 0;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container"></div>
<p id="log"></p>

Comments

+1 यदि आप किसी अन्य तत्व की चौड़ाई निर्धारित कर रहे हैं, तो इसकी चौड़ाई को इस तरह बदलना सुनिश्चित करें: $ ("# अन्य")। css ("चौड़ाई", $ ('# कंटेनर')। get (0) .getBoundingClientRect )। उपलब्धता + "पीएक्स"); यदि आप jQuery चौड़ाई () का उपयोग करते हैं तो मान गोल हो जाएगा।

— लेप

इस तरह के प्रश्न के अनुसार widthऔर heightगुण IE के सभी संस्करणों में समर्थित नहीं हैं, इसलिए कुछ मामलों में उन्हें उपयोग किए जाने से पहले गणना करने की आवश्यकता होती है: stackoverflow.com/questions/11907514/…

— फ्लाइंग 123123

अच्छा! आउटरविद्थ (सच) के लिए भी यही सवाल? :) छोटी टिप्पणी: `IE8 और नीचे में, DOMRect ऑब्जेक्ट getBoundingClientRect () द्वारा वापस आ गया है जिसमें ऊंचाई और चौड़ाई के गुणों का अभाव है। इसके अलावा, अतिरिक्त गुण (ऊंचाई और चौड़ाई सहित) इन DOMRect ऑब्जेक्ट्स पर नहीं जोड़े जा सकते हैं। `

— TecHunter

ध्यान दें कि सीएसएस परिवर्तनों को लागू करने के बादgetBoundingClientRect() आयामों की गणना करता है ।

— user1620220

परीक्षण के बाद मैंने पाया कि यह विधि छिपे हुए तत्वों ( display: none) के लिए काम नहीं करती है ।

— जॉरी ​​होगवीने

Answer 2

बस अपने अनुभव को यहां जोड़ना चाहता था, हालांकि सवाल पुराना है: ऊपर दी गई सर्वसम्मति से लगता है कि jQuery की गोलाई प्रभावी रूप से सिर्फ एक अलिखित गणना के रूप में अच्छी है - लेकिन ऐसा नहीं लगता कि मैं कुछ कर रहा हूं। ।

मेरे तत्व में एक तरल पदार्थ की चौड़ाई है, आम तौर पर, लेकिन सामग्री जो गतिशील रूप से AJAX के माध्यम से बदलती है। सामग्री स्विच करने से पहले, मैं अस्थायी रूप से तत्व के आयामों को लॉक कर देता हूं ताकि मेरा लेआउट संक्रमण के दौरान चारों ओर उछल न जाए। मैंने पाया है कि इस तरह jQuery का उपयोग:

$element.width($element.width());

कुछ ख़ुशी पैदा कर रहा है, जैसे वास्तविक चौड़ाई और गणना की गई चौड़ाई के बीच उप-पिक्सेल अंतर हैं। (विशेष रूप से, मैं एक शब्द को पाठ की एक पंक्ति से दूसरी पंक्ति में देखूंगा, यह दर्शाता है कि चौड़ाई बदल दी गई है, न कि केवल लॉक।) एक अन्य प्रश्न से - एक तत्व की वास्तविक, अस्थायी-बिंदु चौड़ाई प्राप्त करना - मैंने पाया बाहर कि window.getComputedStyle(element).widthएक आसपास की गणना वापस आ जाएगी। इसलिए मैंने उपरोक्त कोड को कुछ इस तरह से बदल दिया

var e = document.getElementById('element');
$('#element').width(window.getComputedStyle(e).width);

और THAT कोड के साथ - कोई मजेदार शेख़ी नहीं! उस अनुभव से यह पता लगता है कि वास्तव में ब्राउज़र के लिए कोई महत्व नहीं है, है ना? (मेरे मामले में, Chrome संस्करण 26.0.1410.65)

Comments

JQuery के .css () के लिए वर्तमान दस्तावेज़ बताता है कि getComputedStyle () को runtimeStyle () i IE कहा जाता है, और .css () के लाभों में से एक यह एकीकृत इंटरफ़ेस है।

— नॉरवेबियाई

Answer 3

रॉस एलन का जवाब एक अच्छा शुरुआती बिंदु है, लेकिन getBoundingClientRect () का उपयोग करते हुए । चौड़ाई में पैडिंग और बॉर्डर की चौड़ाई भी शामिल होगी जो कि jquery की चौड़ाई फ़ंक्शन के मामले में नहीं है :

लौटी हुई TextRectangle ऑब्जेक्ट में पैडिंग, स्क्रॉलबार और बॉर्डर शामिल हैं, लेकिन मार्जिन को छोड़कर। इंटरनेट एक्सप्लोरर में, बाउंडिंग आयत के निर्देशांक में क्लाइंट क्षेत्र के शीर्ष और बाएं बॉर्डर शामिल हैं।

यदि आपका इरादा widthसटीक के साथ मूल्य प्राप्त करना है , तो आपको इस तरह पैडिंग और सीमा को हटाना होगा:

var a = $("#container");
var width = a[0].getBoundingClientRect().width;

//Remove the padding width (assumming padding are px values)
width -= (parseInt(a.css("padding-left")) + parseInt(a.css("padding-right")));

//Remove the border width
width -= (a.outerWidth(false) - a.innerWidth());

Comments

आप के .replace("px", "")रूप में parseIntआप के लिए है कि हटा नहीं करना चाहिए।

— स्टीव शब

यह प्रश्न गोलाई को रोकने के बारे में है, मैं यहाँ स्पष्ट धारणा से चकित हो रहा हूँ कि गोलाई पैडिंग मानों के लिए ठीक है। क्यों आप किसी भी अलग तरीके से मूल्यों को मानेंगे? parseFloat()शायद उपयोग करें ?

— फिल्स

इसी तरह, innerWidth()मूल समस्या का हिस्सा होने के साथ , मुझे डर है कि यहां सीमा चौड़ाई गणना भी गोल मूल्यों पर काम कर रही है।

— फिल्स

Answer 4

आप getComputedStyleइसके लिए उपयोग कर सकते हैं :

parseFloat(window.getComputedStyle($('#container').get(0)).width)

Answer 5

एक सटीक चौड़ाई प्राप्त करने के लिए निम्नलिखित का उपयोग करें:

var htmlElement=$('class or id');
var temp=htmlElement[0].style.width;

Comments

यदि आप वास्तव में इसे सेट करते हैं और इसे उपलब्ध करवाते हैं तो आप क्यों चाहते हैं कि आपको अपनी गणना की गई चौड़ाई मिल जाएstyle.width

— user151496