मैं केवल सीएसएस का उपयोग कर दृश्य तत्वों की शैली को बदलना चाहता हूं। क्या कोई चयनकर्ता है जो करता है? इसे केवल क्रोम और फ़ायरफ़ॉक्स के साथ काम करने की ज़रूरत है। (मैं एक एक्सटेंशन/एडन बना रहा हूं)क्या कोई सीएसएस है: दृश्यमान (स्क्रॉल) चयनकर्ता?
यदि नहीं है, तो प्रकाश तत्वों के साथ दृश्य तत्वों की शैली को बदलने का कोई तरीका है?
वर्तमान पुस्तक स्थिति भीतर दर्शनीय । एक तत्व स्क्रॉल दृष्टि से बाहर हो सकता है, या आंशिक रूप से दिखाई दे सकता है।
दृश्यता का आकलन करने के लिए कोई मानक शुद्ध सीएसएस नियम नहीं है।
के रूप में अन्य लोगों ने कहा, jQuery (यदि आप jQuery उपयोग करना चाहता था) दोनों एक CSS selector extension:visible और किसी भी jQuery वस्तु पर .is(':visible') निष्पादित करने के लिए .css("display") या .css("visibility") साथ किसी भी DOM तत्व की गणना शैली पाने के लिए की क्षमता है।
यह निर्धारित करने के लिए सादा जावास्क्रिप्ट में विशेष रूप से सरल नहीं है कि कोई वस्तु दिखाई दे रही है क्योंकि आपको गणना की गई है (सभी संभावित सीएसएस नियमों को ध्यान में रखना जो तत्व को प्रभावित कर सकते हैं) और आपको यह सुनिश्चित करना होगा कि कोई मूल वस्तु नहीं है बच्चे तत्व को छुपाए जाने के कारण छुपाए गए हैं। यह मेरे पास एक निजी कार्य है जो मेरी व्यक्तिगत लाइब्रेरी में है:
//----------------------------------------------------------------------------------------------------------------------------------
// JF.isVisible function
//
// Determines if the passed in object is visible (not visibility:hidden, not display: none
// and all parents are visible too.
//
// Source: http://snipplr.com/view/7215/javascript-dom-element-visibility-checker/
//----------------------------------------------------------------------------------------------------------------------------------
JF.isVisible = function(obj)
{
var style;
if (obj == document) return true;
if (!obj) return false;
if (!obj.parentNode) return false;
if (obj.style) {
if (obj.style.display == 'none') return false;
if (obj.style.visibility == 'hidden') return false;
}
//Try the computed style in a standard way
if (window.getComputedStyle) {
style = window.getComputedStyle(obj, "")
if (style.display == 'none') return false;
if (style.visibility == 'hidden') return false;
} else {
//Or get the computed style using IE's silly proprietary way
style = obj.currentStyle;
if (style) {
if (style['display'] == 'none') return false;
if (style['visibility'] == 'hidden') return false;
}
}
return JF.isVisible(obj.parentNode);
};
@ डेविड-कैनिज़ो - मैंने इस जवाब में आपके संपादन को खारिज कर दिया है, हालांकि आपको एक वैकल्पिक समाधान को उत्तर के रूप में सबमिट करने के लिए प्रोत्साहित किया जाता है (या इस पर टिप्पणी) मौजूदा [एएसपी को संपादित करना उचित नहीं है। _Accepted_] [इस हद तक] का उत्तर दें (https://stackoverflow.com/review/suggested-edits/18413980)। देखें: [अगर मुझे अपूर्ण है तो क्या मुझे जवाब संपादित करना चाहिए?] (Https://meta.stackoverflow.com/a/302824/8112776) – ashleedawg
यह मेरे लिए एक :visible चयनकर्ता की तरह दिखता है: http://api.jquery.com/visible-selector/
संपादित: अपने 'नहीं सीएसएस' चेतावनी से पहले अपने javascript टैग देखा।
लेकिन यह एक सीएसएस चयनकर्ता है।
हा, जानना अच्छा है। ऊपर इसे वोट दिया क्योंकि यह मेरे समाधान से आसान है। –
, अदृश्य तत्व का चयन करने के कोई तरीका नहीं है शुद्ध सीएसएस का उपयोग कर
http://www.w3.org/TR/selectors/
हालांकि, अगर आप एक वर्ग के नाम या अन्य चयनकर्ता है, jQuery का उपयोग कर आप निम्नलिखित
jQuery(selector).each(function(){
Var $this=$(this);
if ($this.css('visibility')==='hidden')
//set your style
})
संपादित करें: आपके संपादन के बाद, निश्चित रूप से सीएसएस के साथ व्यूपोर्ट के भीतर क्या है इसका चयन करने का कोई तरीका नहीं है। यह एक संदर्भ मुक्त भाषा है।
हालांकि, आप jquery के साथ ऑफसेट स्थिति के साथ हमेशा बेवकूफ बना सकते हैं और यह निर्धारित कर सकते हैं कि यह वर्तमान व्यूपोर्ट (window.scrollposition या कुछ समान) में है या नहीं। हालांकि, इस प्रकार का समाधान जल्दी गन्दा हो जाता है।
जैसा कि अन्य समाधानों पर दिखाया गया है, ऐसा करने का एक आसान तरीका है। – Scalpweb
2 साल बाद इसे खोजने के लिए बधाई। –
ऐसा करने का कोई शुद्ध सीएसएस तरीका नहीं है। जैसा कि किरेन की टिप्पणी पहले ही कहती है, आप केवल दृश्य तत्वों को क्यों शैली बनाना चाहते हैं? अदृश्य तत्व वैसे भी अपनी स्टाइल नहीं दिखाएंगे। यदि आप अदृश्य तत्व को स्थान लेना नहीं चाहते हैं (उर्फ, रखी गई), तो आपको display: none;
यदि आप वास्तव में दृश्य तत्वों का चयन करने के लिए चयनकर्ता चाहते हैं, तो आप Widor सुझा सकते हैं और jQuery का उपयोग कर सकते हैं। आप पहली बार दृश्य तत्वों का चयन करने के लिए jQuery का उपयोग कर सकते हैं, उन्हें एक वर्ग जोड़ सकते हैं, फिर उस वर्ग के तत्वों का चयन करने के लिए सीएसएस का उपयोग करें।
$('div:visible').addClass('visibleElement');
.visibleElement {
color: red;
}
आप पहले से ही jQuery उपयोग कर रहे हैं, वहाँ है कि तुम क्या व्यूपोर्ट एक सीएसएस चयनकर्ता का उपयोग में है का चयन करने के लिए अनुमति देता है एक Viewport प्लगइन है। यह निश्चित रूप से शुद्ध सीएसएस नहीं है, लेकिन इस समय सबसे निकटतम समाधान प्रतीत होता है (फिर, मान लीजिए कि आप jQuery का उपयोग करने के साथ ठीक हैं)। आपको शायद कुछ ऐसा करना होगा:
$(window).scroll(function() {
$('.interestingElements:in-viewport').addClass('iSeeYou');
});
उम्मीद है कि आखिर में मूल सीएसएस विकल्प होगा।
आपको केवल दृश्यमान वस्तुओं को स्टाइल करने की आवश्यकता क्यों होगी? स्टाइलिंग अदृश्य तत्व किसी भी तरह से कुछ भी नहीं करते हैं –
यदि आप jQuery का उपयोग करने के इच्छुक हैं, तो इसमें 'दृश्यमान' छद्म चयनकर्ता है। –
कियरन की तरह, अदृश्य तत्वों को बदलने से कम से कम कुछ भी नहीं देखा जाता है। हम मानते हैं कि आपके पास पहले से ही कुछ जेएस या PHP हैं जो आवश्यकतानुसार इन/दृश्य तत्वों को बाहर कर देते हैं तो आप जेएस से बचने की कोशिश क्यों कर रहे हैं? आप जो हासिल करने की कोशिश कर रहे हैं उस पर थोड़ा और स्पष्टता, और संभवतः कुछ वास्तविक कोड जो आपने कोशिश की है, हम बेहतर समाधान प्रदान कर सकते हैं। –