jQuery में CSS नियम का प्रतिशत मान प्राप्त करें

Question

मान लीजिए कि नियम इस प्रकार है:

.largeField {
    width: 65%;
}

वहाँ किसी भी तरह '65% 'वापस पाने का एक तरीका है, और पिक्सेल मूल्य नहीं है?

धन्यवाद।

संपादित करें: दुर्भाग्य से DOM के तरीकों का उपयोग करना मेरे मामले में अविश्वसनीय है, क्योंकि मेरे पास एक स्टाइलशीट है जो अन्य स्टाइलशीट का आयात करती है, और परिणामस्वरूप सीएसएसआरयूल्स पैरामीटर या तो शून्य या अपरिभाषित मूल्य के साथ समाप्त होता है ।

यह दृष्टिकोण, हालांकि, सबसे सीधे मामलों (एक स्टाइलशीट, दस्तावेज़ के हेड टैग के अंदर कई अलग-अलग स्टाइलशीट घोषणाओं ) में काम करेगा।

Comments

इस डेटा को स्वयं तत्व पर बीज देना और फिर यह ट्रैक करना बेहतर होगा कि यह भविष्य में कैसे बदलता है।

— ट्रैविस जे

Answer 1

कोई अंतर्निहित तरीका नहीं है, मुझे डर है। आप ऐसा कुछ कर सकते हैं:

var width = ( 100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';

Comments

बस स्पष्ट होने के लिए, यह आपको अपनी शैली में मूल्य नहीं बताता है, यह आपको एक गणना मूल्य देता है

— एंथनी जॉनसन

@ शेव्स्की यह ठीक काम करता है, आपको class="largeField"स्पैन में जोड़ना होगा, वर्तमान में आप एक खाली सेट का चयन कर रहे हैं।

— एडम लाससेक

मुझे पता है कि इसमें क्या काम नहीं हो रहा है और इसीलिए यह एक काउंटर-उदाहरण है।

— 21

@ शेवस्की मेरा उदाहरण पृष्ठ पर एक मौजूदा तत्व का एक संगणित मूल्य देता है, जैसा कि एंथोनी ने एक साल पहले ही बताया था। आपकी टिप्पणियाँ बहुत ही शानदार हैं।

— एडम लाससेक

@ अदमलसेक, एंथनी ने यह नहीं कहा कि यह सबसे अधिक मौजूद है।

— शेवस्की

Answer 2

सबसे आसान तरीका है

$('.largeField')[0].style.width

// >>> "65%"

Comments

बस एक नोट: यह केवल तत्व पर सीधे लागू किए गए css के साथ काम करेगा (जैसे style="width:65%")।

— brianreavis

महान!! बस संख्या वापस करने के लिए: parseInt ($ ('। BigField') [0] .style.width, 10);

— टिआगो

टियागो, आप बस parseFloat () का उपयोग कर सकते हैं।

— गैविन

यह केवल इनलाइन स्टाइलिंग में काम करता है जैसा @brianreavis ने कहा।

— अकांक्षा

Answer 3

यह निश्चित रूप से संभव है!

आपको सबसे पहले मूल तत्व को छिपाना होगा। यह जावास्क्रिप्ट को बाल तत्व के लिए पिक्सेल की गणना करने से रोकेगा।

$('.parent').hide();
var width = $('.child').width();
$('.parent').show();
alert(width);

मेरा उदाहरण देखें ।

अब ... मुझे आश्चर्य है कि अगर मैं पहली बार इस हैक की खोज कर रहा हूँ :)

अपडेट करें:

एक लाइन

element.clone().appendTo('body').wrap('<div style="display: none"></div>').css('width');

यह </body>टैग से पहले एक छिपे हुए तत्व को पीछे छोड़ देगा , जिसे आप चाहते हैं .remove()।

एक-लाइनर का एक उदाहरण देखें ।

मैं बेहतर विचारों के लिए खुला हूँ!

Comments

यह स्वीकृत समाधान होना चाहिए। मैं यह भी पुष्टि कर सकता हूं कि यह मेरे लिए काम करता है जहां अन्य उत्तरों को मूल रूप से निर्दिष्ट प्रतिशत मूल्य नहीं मिलता है।

— एरिका

चंचलता से बचने के लिए, बच्चे को क्लोन करें, माता-पिता को छिपाएं, फिर चौड़ाई को पुनः प्राप्त करें। var क्लोन = $ ('बच्चा'); क्लोन ();

— user1491819

अद्यतन: फ़ंक्शन getCssWidth (childSelector) {रिटर्न jQuery (childSelector)) ()। क्लोन ()। Hide ()। Find (childSelector)। उपलब्धता (); } कंसोल.लॉग ('चाइल्ड चौड़ाई:' + getCssWidth ('चाइल्ड')) ;;

— user1491819

बहुत बढ़िया समाधान! यहाँ शुद्ध js स्क्रिप्ट के बराबर है jsfiddle.net/Sjeiti/2qkftdjd

— Sjeiti

यदि $ (...) [0] .style.width उत्तर काम करता है, तो क्या वह स्वीकृत समाधान नहीं होना चाहिए? यह समाधान, जबकि सुरुचिपूर्ण, कुछ प्रदर्शन कमियों से ग्रस्त है।

— मिहाई दानिला

Answer 4

आप document.styleSheetsवस्तु तक पहुँच सकते हैं :

<style type="text/css">
    .largeField {
        width: 65%;
    }
</style>
<script type="text/javascript">
    var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var i=0; i < rules.length; i++) {
        var rule = rules[i];
        if (rule.selectorText.toLowerCase() == ".largefield") {
            alert(rule.style.getPropertyValue("width"));
        }
    }
</script>

Comments

DOM तरीकों का +1 उचित उपयोग (कभी-कभी jQuery का जवाब नहीं है)

— bobince

+1 शुद्धता के लिए मैं यहां आपके साथ हूं। मैं उत्सुक हूं कि प्रत्येक ब्राउज़र इसे कैसे दबाता है, लेकिन यह सही उत्तर है।

— cgp

सरल मामलों में अच्छी तरह से काम करता है, दोनों एफएफ और IE7, लेकिन मेरे लिए नहीं (ऊपर EDIT देखें)।

— मोंट्रिलिस्ट

क्या आपने सभी स्टाइलशीट के माध्यम से भी दौड़ने की कोशिश की है? मेरा उदाहरण सिर्फ पहले ( styleSheets[0]) इस्तेमाल किया ।

— गम्बू

क्षमा करें यदि यह एक नॉब प्रश्न है, लेकिन for (var i=0; rules.length; i++)काम कैसे करेगा ? ऐसा नहीं होना चाहिएfor (var i=0; i<rules.length; i++)

— sbichenko

Answer 5

देर से, लेकिन नए उपयोगकर्ताओं के लिए, अगर css शैली में प्रतिशत होता है , तो यह प्रयास करें :

$element.prop('style')['width'];

Comments

सीएसएस फ़ॉन्ट-आकार के लिए एक आकर्षण की तरह काम किया। $ element.prop ( 'शैली') [ 'font-size];

— जेसन

Answer 6

एडम्स उत्तर पर आधारित एक jQuery प्लगइन:

(function ($) {

    $.fn.getWidthInPercent = function () {
        var width = parseFloat($(this).css('width'))/parseFloat($(this).parent().css('width'));
        return Math.round(100*width)+'%';
    };

})(jQuery);

$('body').html($('.largeField').getWidthInPercent());​​​​​

'65% 'लौटाएगा। यदि आप चाहें तो बेहतर काम करने के लिए केवल राउंडेड संख्याएँ लौटाते हैं (चौड़ाई == '65%')। यदि आप सीधे एडम्स उत्तर का उपयोग करते, तो वह काम नहीं करता (मुझे 64.93288590604027 जैसा कुछ मिला)। :)

Answer 7

टिम्फो के उत्कृष्ट और आश्चर्यजनक समाधान पर निर्माण, यहाँ एक शुद्ध जावास्क्रिप्ट कार्यान्वयन है:

function cssDimensions(element)
  var cn = element.cloneNode();
  var div = document.createElement('div');
  div.appendChild(cn);
  div.style.display = 'none';
  document.body.appendChild(div);
  var cs = window.getComputedStyle
    ? getComputedStyle(cn, null)
    : cn.currentStyle;
  var ret = { width: cs.width, height: cs.height };
  document.body.removeChild(div);
  return ret;
}

आशा है कि यह किसी के लिए उपयोगी है।

Comments

एक सिंटैक्स त्रुटि, आप {पहली पंक्ति के अंत में भूल गए ।

— अकांक्षा

केवल यह समाधान सही रूप से 'ऑटो' दिखाता है जब div सेट नहीं है, jquery css ('चौड़ाई') वापसी '0px'। अन्य सभी उत्तर गलत हैं ...

— एलेक्सी

Answer 8

मेरे पास jQuery में वैश्विक स्टाइलशीट के मूल्यों को प्राप्त करने में एक समान मुद्दा है , आखिरकार मैं ऊपर के समान समाधान के साथ आया ।

बस दो प्रश्नों को पार करना चाहता था ताकि अन्य लोग बाद के निष्कर्षों से लाभान्वित हो सकें।

Comments

आपका प्रश्न और यह पहले से ही जुड़ा हुआ है (देखें दाईं ओर "लिंक्ड" साइडबार) आपके प्रश्न के लिए शेक की टिप्पणी के आधार पर।

— क्रिस जॉन्सन

Answer 9

आप उन शैलियों को रख सकते हैं जिनकी आपको jQuery के साथ पहुँच की आवश्यकता है:

1. सीधे दस्तावेज़ के प्रमुख
2. एक शामिल है, जो सर्वर साइड स्क्रिप्ट तो सिर में डालता है

फिर यह संभव होना चाहिए (हालांकि जरूरी नहीं कि आसान हो) दस्तावेज़ सिर में शैली टैग के भीतर सब कुछ पार्स करने के लिए एक जेएस फ़ंक्शन लिखना और आपको आवश्यक मूल्य वापस करना।

Answer 10

आप तत्व की वर्तमान चौड़ाई को वापस करने के लिए css (चौड़ाई) फ़ंक्शन का उपयोग कर सकते हैं।

अर्थात।

var myWidth = $("#myElement").css("width");

इसे भी देखें: http://api.jquery.com/width/ http://api.jquery.com/css/

Comments

यह नीचे क्यों चिह्नित है? इस Bugs.jquery.com/ticket/4772 पर एक बग खुला है , ऐसा लगता है कि इस पर कॉल करने में कुछ असंगतता है या नहीं, इस पर निर्भर करता है कि आप अपनी स्टाइल इनलाइन डालें या स्टाइल शीट jsfiddle.net/boushley.MSyqR/2

— एंथनी में जॉनसन

मैं नहीं कर सकते इस के साथ% मिलता है

— someoneuseless

Answer 11

JQuery में कुछ भी नहीं है, और जावास्क्रिप्ट में भी कुछ भी सीधा नहीं है। टिमोफ़े का जवाब लेना और उसके साथ चलना, मैंने यह फ़ंक्शन बनाया जो आपके इच्छित गुणों को प्राप्त करने के लिए काम करता है:

// gets the style property as rendered via any means (style sheets, inline, etc) but does *not* compute values
// domNode - the node to get properties for 
// properties - Can be a single property to fetch or an array of properties to fetch
function getFinalStyle(domNode, properties) {
    if(!(properties instanceof Array)) properties = [properties]

    var parent = domNode.parentNode
    if(parent) {
        var originalDisplay = parent.style.display
        parent.style.display = 'none'
    }
    var computedStyles = getComputedStyle(domNode)

    var result = {}
    properties.forEach(function(prop) {
        result[prop] = computedStyles[prop]
    })

    if(parent) {
        parent.style.display = originalDisplay
    }

    return result
}

Answer 12

क्रॉस गुणा का उपयोग करके पिक्सेल से प्रतिशत में परिवर्तित करें ।

सूत्र सेटअप:

1.) (एलीमेंट_प्रवेशन_पिक्सल्स / पेरेंट_वॉइस_पिक्सल) = (एलिमेंट_एक्टिव_परिसेंटेज / १००)

2.) element_width_percentage = (100 * element_width_pixels) / parent_width_pixels

वास्तविक कोड:

<script>

   var $width_percentage = (100 * $("#child").width()) / $("#parent").width();

</script>