क्या सीएसएस के साथ निर्दिष्ट डेवलपर के आधार पर प्रतिशत या पिक्सेल में किसी तत्व की चौड़ाई प्राप्त करने के लिए jQuery का उपयोग करना संभव है?

Question

मैं एक jQuery प्लगइन लिख रहा हूं और कुछ ऐसा करने में सक्षम होने की आवश्यकता है जो उपयोगकर्ता द्वारा निर्दिष्ट तत्व की चौड़ाई निर्धारित करता है। समस्या यह है कि .width() या .css ('width') हमेशा सटीक पिक्सेल की रिपोर्ट करेगा, भले ही डेवलपर ने इसे असाइन किया हो। चौड़ाई: सीएसएस के साथ 90%।

क्या डेवलपर ने इसे सीएसएस के साथ दिया है, इसके आधार पर पीजीए या% में किसी तत्व की चौड़ाई को jQuery आउटपुट करने का कोई तरीका है?

Answer 1

मैं कहना चाहता हूँ सबसे अच्छा तरीका है यह अपने आप गणना करने के लिए है:

var width = $('#someElt').width(); 
var parentWidth = $('#someElt').offsetParent().width(); 
var percent = 100*width/parentWidth; 

Answer 2

मुझे लगता है कि आप सीधे स्टाइलशीट ('शैली') वस्तु का उपयोग कर सकते हैं। फिर भी, ब्राउज़र द्वारा वाईएमएमवी। जैसे elm.style.width।

पीटर की टिप्पणी के लिए संपादित करें :: मैं '% प्राप्त करने' की तलाश नहीं कर रहा हूं। प्रश्न के अनुसार:

मुझे क्या करना एक तत्व है कि उपयोगकर्ता निर्दिष्ट की चौड़ाई निर्धारित है ... में सक्षम होना चाहिए [वहाँ एक रास्ता है करने के लिए] उत्पादन पिक्सल में एक तत्व की चौड़ाई या % डेवलपर ने सीएसएस के साथ क्या दिया है इसके आधार पर%?

इस प्रकार मैं "कच्चे" सीएसएस मान प्राप्त करने के लिए एक विकल्प प्रदान की है। यह एफएफ 3.6 पर काम करता प्रतीत होता है। वाईएमएमवी कहीं और (netadictos का जवाब अधिक पोर्टेबल/सार्वभौमिक हो सकता है, मुझे नहीं पता)। दोबारा, यह '% प्राप्त करने' की तलाश नहीं कर रहा है।

Answer 3

ऐसा करने का तरीका इस स्टैक ओवरफ्लो प्रश्न में दस्तावेज किया गया है।

How do you read CSS rule values with JavaScript?

केवल एक चीज आप को पता करने के लिए है, जिसमें स्टाइलशीट वर्ग या सभी स्टाइलशीट के माध्यम से लूप है। निम्नलिखित फ़ंक्शन आपको कक्षा की सभी सुविधाएं प्रदान करता है, जो फीचर आप ढूंढते हैं उसे निकालने के लिए रेगेक्स करना आसान होगा।

function getStyle(className) { 
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules 
    for(var x=0;x<classes.length;x++) { 

     if(classes[x].selectorText==className) { 
       (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText); 
     } 
    } 
} 
getStyle('.test'); 

Answer 4

मेरे उद्देश्यों के लिए मैंने MДΓΓ БДLL के जवाब को बाहर निकाला।

ध्यान रखें, मैं केवल पूरे प्रतिशत के साथ काम कर रहा हूं।

var getPercent = function(elem){ 
     var elemName = elem.attr("id"); 
     var width = elem.width(); 
     var parentWidth = elem.offsetParent().width(); 
     var percent = Math.round(100*width/parentWidth); 
     console.log(elemName+"'s width = "+percent+"%"); 
    } 

    getPercent($('#folders')); 
    getPercent($('#media')); 
    getPercent($('#player')); 

Answer 5

आप एक नया प्रतिशत के मूल तत्वों प्रतिशत पुन: असाइन करने के लिए देख रहे हैं, तो यह सीएसएस में है कि मूल्य को परिभाषित करने और तत्वों पहचानकर्ता (वर्ग, आईडी, आदि) किसी तरह से संशोधित प्रतिबिंबित करने के लिए करने के लिए एक अच्छा अभ्यास है नई सीएसएस परिभाषा। यह हमेशा लागू नहीं होता है यदि नया प्रतिशत परिवर्तनीय चर होना आवश्यक है।

.myClass{ 
    width:50%; 
} 

.myNewClass{ 
    width:35%; 
} 

इस (या अन्य) विधि के माध्यम से एक को हटाने जोड़ना:

$('.myClass').removeClass('myClass').addClass('myNewClass'); 

Answer 6

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

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

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

मेरी example देखें।

Answer 7

बस इसे और अधिक jqueryish

इस

$.fn.percWidth = function(){ 
    return this.outerWidth()/this.parent().outerWidth() * 100; 
} 

जोड़ने और फिर

$(selector).percWidth() 

इस का उपयोग% चिह्न के बिना प्रतिशत मान प्रदान करेगा बनाने के लिए है, तो आप में उपयोग कर सकते हैं गणना

Answer 8

मैं हाल ही में इस समस्या से मुलाकात की और मैं वास्तव में नहीं चाहता था "अतिरिक्त" काम करने के लिए जो माता-पिता की चौड़ाई और प्रतिशत की गणना कर रहा था।

कुछ त्वरित प्रयासों के बाद, यह मैं क्या मिल गया है है:

$($($(table).find('tr')[0]).find('td')).each(function (i, e) { 
     var proptW = $(e).prop("style").width; 
     console.log(proptW); 
    }); 

तो, मुझे लगता है कि यह jQuery का उपयोग करने के एक तत्व के आधार पर की चौड़ाई का मूल्य प्राप्त करने के लिए निकटतम तरीका है क्या सीएसएस में निर्दिष्ट डेवलपर।

आप देख सकते हैं, मैं एक मेज है और मैं कॉलम से प्रत्येक के लिए चौड़ाई को पुनः प्राप्त करने की जरूरत है।

हम डेवलपर निर्धारित मूल्य (DSV) सीधे jQuery विधि के साथ नहीं मिल सकता है, लेकिन जावास्क्रिप्ट में निर्मित विधि के साथ संयुक्त के बाद, यह DSV हो रहा से बस एक कदम दूर है।

जैसा कि डीएसवी शैली में है और स्टाइल तत्व की एक संपत्ति है, इसलिए हम इसे प्राप्त करने के लिए jQuery विधि: prop() का उपयोग कर सकते हैं। यह विधि स्टाइल ऑब्जेक्ट (स्टाई कहती है) देता है, ताकि हम सीधे DSV प्राप्त करने के लिए sty.width को कॉल कर सकें।

यह शुद्ध jQuery तरह से इसे पाने के लिए नहीं है, लेकिन यह काफी सरल है और मेरे लिए काम करता है।

मुझे उम्मीद है कि यह मदद करता है।

चीयर्स,

Answer 9

इसके सेट शैली टैग का उपयोग कर रहे हैं, तो आप बस .prop उपयोग कर सकते हैं()
उदा $ ('। चयनकर्ता') सहारा ('शैली') width.replace ('%', '')