दिलचस्प पोस्ट
रनटाइम पर Django सेटिंग्स बदलने अस्थायी डेटाबेस का निर्माण करना जो कि मैवेन परीक्षण चरणों में काम करता है? एंटिटी फ़्रेमवर्क धाराप्रवाह एपीआई का उपयोग करके कई रिश्तों को कैसे विन्यस्त करें ENOENT का अर्थ "ऐसा कोई फ़ाइल या निर्देशिका नहीं" क्यों है? जावा एक सरणी से डुप्लिकेट निकालें? बाइनरी पेड़ों के आवेदन क्या हैं? jquery – फ़ंक्शन त्रुटि नहीं है AttributeError: 'मॉड्यूल' ऑब्जेक्ट का कोई विशेषता 'स्ट्रिपटाइम' नहीं है Php स्ट्रिंग से नियंत्रण अक्षर निकालें सांबा जेसीआईएफएस के साथ जावा का उपयोग करने की सुविधा पायथन में बूलियन एक्सप्रेशंस का मूल्यांकन डेटाबेस से बने फ्लास्क रिटर्न छवि स्विफ्ट उपस्थित ViewController C ++ में एक विरल सरणी बनाने का सबसे अच्छा तरीका क्या है? उबंटू में एडीबी निष्पादित करने में असमर्थ डाउनलोड की गई फ़ाइल x86-64 के लिए है, जबकि मेरे पास आई 686 है

मैं कैसे जांचूं अगर एक तत्व जावास्क्रिप्ट के साथ वास्तव में दिखाई दे रहा है?

जावास्क्रिप्ट में, आप कैसे जांच करेंगे कि कोई तत्व वास्तव में दिखाई दे रहा है या नहीं?

मैं बस visibility और display विशेषताओं की जांच करना नहीं चाहता। मेरा मतलब है, जाँच कर रहा है कि तत्व नहीं है

  • visibility: hidden या display: none
  • एक और तत्व के नीचे
  • स्क्रीन के किनारे से स्क्रॉल करें

तकनीकी कारणों से मैं किसी भी स्क्रिप्ट को शामिल नहीं कर सकता मैं हालांकि प्रोटोटाइप का उपयोग कर सकता हूं क्योंकि यह पहले से ही पेज पर है।

Solutions Collecting From Web of "मैं कैसे जांचूं अगर एक तत्व जावास्क्रिप्ट के साथ वास्तव में दिखाई दे रहा है?"

बिंदु 2 के लिए

मुझे लगता है कि कोई भी document.elementFromPoint(x,y) का उपयोग करने के लिए सुझाव नहीं दिया है। एलिमेंटफ्रेम document.elementFromPoint(x,y) , मेरे लिए यह परीक्षण करने का सबसे तेज़ तरीका है यदि कोई तत्व नेस्टेड है या दूसरे द्वारा छुपा हुआ है आप फ़ंक्शन पर लक्ष्यित तत्व के ऑफ़सेट को पास कर सकते हैं।

यहां elementFromPoint पर पीपीके परीक्षण पृष्ठ है।

मुझे नहीं पता है कि पुराने या बहुत-आधुनिक-आधुनिक ब्राउज़रों में इसका कितना समर्थन है, लेकिन मैं इस तरह से कुछ उपयोग कर रहा हूं (बिना किसी पुस्तकालयों के लिए)।

 function visible(element) { if (element.offsetWidth === 0 || element.offsetHeight === 0) return false; var height = document.documentElement.clientHeight, rects = element.getClientRects(), on_top = function(r) { var x = (r.left + r.right)/2, y = (r.top + r.bottom)/2; document.elementFromPoint(x, y) === element; }; for (var i = 0, l = rects.length; i < l; i++) { var r = rects[i], in_viewport = r.top > 0 ? r.top <= height : (r.bottom > 0 && r.bottom <= height); if (in_viewport && on_top(r)) return true; } return false; } 

यह जांचता है कि तत्व में एक क्षेत्र है> 0 और फिर यह जांचता है कि तत्व के किसी हिस्से को व्यूपोर्ट के भीतर है और यह किसी अन्य तत्व ("वास्तव में" केवल "तत्व के केंद्र में एक बिंदु पर जांचता है" , इसलिए यह 100% आश्वासन नहीं दिया गया है – लेकिन आप तत्व की सभी बिंदुओं पर पटकना करने के लिए स्क्रिप्ट को संशोधित कर सकते हैं, अगर आपको वास्तव में आवश्यकता हो …)।

अद्यतन करें

संशोधित on_top फ़ंक्शन जो प्रत्येक पिक्सेल की जांच करता है:

 on_top = function(r) { for (var x = Math.floor(r.left), x_max = Math.ceil(r.right); x <= x_max; x++) for (var y = Math.floor(r.top), y_max = Math.ceil(r.bottom); y <= y_max; y++) { if (document.elementFromPoint(x, y) === element) return true; } return false; }; 

प्रदर्शन के बारे में नहीं पता 🙂

जैसा कि जेकेएल ने बताया, तत्व की दृश्यता की जांच या प्रदर्शन पर्याप्त नहीं है। आपको अपने पूर्वजों को देखना होगा सेलेनियम ऐसा करता है जब यह किसी तत्व की दृश्यता को सत्यापित करता है।

सेलेनियम- api.js फ़ाइल में विधि Selenium.prototype.isVisible देखें।

http://svn.openqa.org/svn/selenium-on-rails/selenium-on-rails/selenium-core/scripts/selenium-api.js

दिलचस्प सवाल

यह मेरा दृष्टिकोण होगा

  1. पहले उस तत्व की जांच करें.स्टाइल.दृश्यता! == 'छुपा' && element.style.display! == 'कोई नहीं'
  2. फिर दस्तावेज़ के साथ परीक्षण करें। एलिमेंटफ़ॉर्म पॉइंट (element.offsetLeft, element.offsetTop) यदि लौटा हुआ तत्व तत्व है जो मुझे उम्मीद है, यह पता लगाना मुश्किल है कि क्या कोई अन्य तत्व पूरी तरह से ओवरलैप कर रहा है।
  3. अंत में परीक्षण करें कि ऑफ़सेटटॉप और ऑफ़सेट लयफ्ट व्यूपोर्ट में स्क्रॉल ऑफ़सेट को खाते में ले जाने पर स्थित है।

आशा करता हूँ की ये काम करेगा।

अभी तक मेरे पास इतना ही है। यह 1 और 3 दोनों को कवर करता है। मैं अभी भी 2 से संघर्ष कर रहा हूं क्योंकि मैं प्रोटोटाइप से परिचित नहीं हूं (मैं एक jQuery प्रकार का आदमी हूं)।

 function isVisible( elem ) { var $elem = $(elem); // First check if elem is hidden through css as this is not very costly: if ($elem.getStyle('display') == 'none' || $elem.getStyle('visibility') == 'hidden' ) { //elem is set through CSS stylesheet or inline to invisible return false; } //Now check for the elem being outside of the viewport var $elemOffset = $elem.viewportOffset(); if ($elemOffset.left < 0 || $elemOffset.top < 0) { //elem is left of or above viewport return false; } var vp = document.viewport.getDimensions(); if ($elemOffset.left > vp.width || $elemOffset.top > vp.height) { //elem is below or right of vp return false; } //Now check for elements positioned on top: //TODO: Build check for this using Prototype... //Neither of these was true, so the elem was visible: return true; } 

प्रोटोटाइप एलिमेंट लाइब्रेरी तरीकों के संदर्भ में सबसे शक्तिशाली क्वेरी लाइब्रेरी में से एक है। मैं आपको एपीआई देखने की सलाह देता हूं।

कुछ संकेत:

  1. दृश्यता की जांच एक दर्द हो सकती है, लेकिन आप Element.getStyle() विधि और Element.visible() तरीकों को एक कस्टम फ़ंक्शन में संयोजित कर सकते हैं। getStyle() आप वास्तविक गणना शैली की जांच कर सकते हैं

  2. मुझे नहीं पता कि "नीचे" से आप क्या कह रहे हैं 🙂 यदि आप इसका मतलब चाहते हैं कि उसके पास एक विशिष्ट पूर्वज है, उदाहरण के लिए, एक आवरण डिव, आप Element.up(cssRule) उपयोग कर सकते हैं:

     var child = $("myparagraph"); if(!child.up("mywrapper")){ // I lost my mom! } else { // I found my mom! } 

    यदि आप बच्चे तत्व के भाई-बहनों को देखना चाहते हैं तो आप ऐसा भी कर सकते हैं:

     var child = $("myparagraph"); if(!child.previous("mywrapper")){ // I lost my bro! } else { // I found my bro! } 
  3. फिर, एलीमेंट लिब आपकी मदद कर सकता है अगर मैं सही ढंग से समझता हूं कि आप क्या कह रहे हैं 🙂 आप व्यूपोर्ट के वास्तविक आयाम और अपने तत्व की ऑफसेट की जांच कर सकते हैं ताकि आप गणना कर सकें कि आपका तत्व "ऑफ़ स्क्रीन" है या नहीं।

सौभाग्य!

मैंने http://gist.github.com/117125 पर प्रोटोटाइपज के लिए एक परीक्षण का मामला चिपकाया। ऐसा लगता है कि आपके मामले में हम बस getStyle() पर विश्वास नहीं कर सकते। IMeElementReallyVisible फ़ंक्शन की विश्वसनीयता को अधिकतम करने के लिए आपको निम्न को संयोजित करना चाहिए:

  • गणना की गई शैली की जांच (डोजो में एक अच्छा कार्यान्वयन है जिसे आप उधार ले सकते हैं)
  • व्यूपोर्टऑफ़सेट (प्रोटोटाइप मूल पद्धति) की जांच कर रहा है
  • "नीचे" समस्या के लिए z- अनुक्रमणिका की जांच करना (इंटरनेट एक्सप्लोरर के तहत यह छोटी गाड़ी हो सकती है)

यह करने का एक तरीका है:

 isVisible(elm) { while(elm.tagName != 'BODY') { if(!$(elm).visible()) return false; elm = elm.parentNode; } return true; } 

क्रेडिट: https://github.com/atetlaw/Really-Easy-Field-Validation/blob/master/validation.js#L178

माउस-ड्रैग और व्यूपोर्ट ईवेंट को पकड़ो (ऑनमोउसेअप, ऑनर्सज़, ऑनसक्रोल)।

जब एक खींचें समाप्त होती है, तो सभी "रुचि के तत्व" (यानी "dont_hide" वर्ग के तत्व या आईडी की एक सरणी) के साथ ड्रैग किए गए आइटम सीमा की तुलना करते हैं। खिड़की के साथ वही करें। किसी विशेष तत्व या क्लासनाम के साथ छिपे हुए किसी भी तत्व को चिह्नित करें या बस उस कार्य को पूरा करें जिसे आप और उसके बाद करना चाहते हैं।

छिपे हुए परीक्षण बहुत आसान हैं "पूरी तरह से छिपी" के लिए आप जानना चाहते हैं कि क्या सभी कोने ड्रैग किए गए आइटम सीमा के अंदर या व्यूपोर्ट के बाहर हैं आंशिक रूप से छिपी के लिए आप एक ही टेस्ट से मेल खाते के एक कोने की तलाश कर रहे हैं।

मुझे लगता है कि तत्व की अपनी दृश्यता की जांच नहीं है और प्रदर्शन गुण 1 # आवश्यकता के लिए काफी अच्छा है, भले ही आप मौजूदा स्टाइल / GetComputedStyle का उपयोग करें आपको तत्व के पूर्वजों को भी जांचना होगा। अगर एक पूर्वज छुपा हुआ है, तो तत्व भी है।

मैं आपको jQuery (जैसे अक्सर किया जाता है) के लिए रीडायरेक्ट करने से नफरत करता हूं, लेकिन जब इस बारे में चर्चा होती है कि तत्व वास्तव में दिखाई दे रहे हैं तो यह बहुत ही व्यावहारिक है।

और jQuery 1.3.2 के बाद से यह अब एक समस्या नहीं है ।

तत्वों की ऑफसेटहाइट संपत्ति जांचें यदि यह 0 से अधिक है, तो यह दृश्यमान है। ध्यान दें: इस दृष्टिकोण में ऐसी स्थिति शामिल नहीं होती जब दृश्यता: छिपी हुई शैली सेट हो। लेकिन वह शैली कुछ अजीब वैसे ही है

यहां एक नमूना स्क्रिप्ट और टेस्ट केस है स्थित तत्वों को शामिल किया गया, visibilty: छिपा हुआ, प्रदर्शन: कोई नहीं Z- अनुक्रमणिका का परीक्षण नहीं किया, मान लें कि यह काम करता है

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <style type="text/css"> div { width: 200px; border: 1px solid red; } p { border: 2px solid green; } .r { border: 1px solid #BB3333; background: #EE9999; position: relative; top: -50px; height: 2em; } .of { overflow: hidden; height: 2em; word-wrap: none; } .of p { width: 100%; } .of pre { display: inline; } .iv { visibility: hidden; } .dn { display: none; } </style> <script src="http://www.prototypejs.org/assets/2008/9/29/prototype-1.6.0.3.js"></script> <script> function isVisible(elem){ if (Element.getStyle(elem, 'visibility') == 'hidden' || Element.getStyle(elem, 'display') == 'none') { return false; } var topx, topy, botx, boty; var offset = Element.positionedOffset(elem); topx = offset.left; topy = offset.top; botx = Element.getWidth(elem) + topx; boty = Element.getHeight(elem) + topy; var v = false; for (var x = topx; x <= botx; x++) { for(var y = topy; y <= boty; y++) { if (document.elementFromPoint(x,y) == elem) { // item is visible v = true; break; } } if (v == true) { break; } } return v; } window.onload=function() { var es = Element.descendants('body'); for (var i = 0; i < es.length; i++ ) { if (!isVisible(es[i])) { alert(es[i].tagName); } } } </script> </head> <body id='body'> <div class="s"><p>This is text</p><p>More text</p></div> <div class="r">This is relative</div> <div class="of"><p>This is too wide...</p><pre>hidden</pre> <div class="iv">This is invisible</div> <div class="dn">This is display none</div> </body> </html> 
 /** * Checks display and visibility of elements and it's parents * @param DomElement el * @param boolean isDeep Watch parents? Default is true * @return {Boolean} * * @author Oleksandr Knyga <oleksandrknyga@gmail.com> */ function isVisible(el, isDeep) { var elIsVisible = true; if("undefined" === typeof isDeep) { isDeep = true; } elIsVisible = elIsVisible && el.offsetWidth > 0 && el.offsetHeight > 0; if(isDeep && elIsVisible) { while('BODY' != el.tagName && elIsVisible) { elIsVisible = elIsVisible && 'hidden' != window.getComputedStyle(el).visibility; el = el.parentElement; } } return elIsVisible; } 

आप ग्राहक का उपयोग कर सकते हैं हाइट या क्लाइंट Width गुण

 function isViewable(element){ return (element.clientHeight > 0); } 

element.getBoundingClientRect() प्रयास करें यह गुणों के साथ एक वस्तु वापस करेगा

  • तल
  • चोटी
  • सही
  • बाएं
  • चौड़ाई – ब्राउज़र निर्भर
  • ऊंचाई – ब्राउज़र निर्भर

जांचें कि तत्व के BoundingClientRect की चौड़ाई और ऊंचाई शून्य नहीं है, जो छुपा या गैर-दृश्यमान तत्वों का मूल्य है। यदि मूल्य शून्य से अधिक है तो तत्व शरीर में दिखाई देना चाहिए। फिर जांच लें कि bottom संपत्ति screen.height से कम है। screen.height जो दर्शाता है कि तत्व व्यूपोर्ट को ले रहा है। (तकनीकी रूप से आपको सर्चबार, बटन, इत्यादि सहित ब्राउज़र विंडो के शीर्ष पर भी खाता होना होगा)

यहां प्रतिक्रिया का एक हिस्सा है जो आपको बताता है कि कोई तत्व व्यूपोर्ट में है या नहीं। आप को यह पता लगाना पड़ सकता है कि elementFromPoint का उपयोग करते हुए इसके ऊपर कुछ भी नहीं है, लेकिन यह थोड़ा अधिक है

 function isInViewport(element) { var rect = element.getBoundingClientRect() var windowHeight = window.innerHeight || document.documentElement.clientHeight var windowWidth = window.innerWidth || document.documentElement.clientWidth return rect.bottom > 0 && rect.top < windowHeight && rect.right > 0 && rect.left < windowWidth } 

पहला बिंदु का उत्तर काफी सरल है यदि आप अभी भी प्रोटोटाइप (प्रोटोटाइपज) का उपयोग करने में सक्षम हैं:

 $('HtmlElementID').visible(); returns: true|false