Javascript, CSS: शैली विशेषता द्वारा तत्व प्राप्त

Question

मैं करना चाहते हैं:

1. (उदाहरण के लिए: सभी तत्वों है color:#333;) पेज में सभी तत्वों के लिए एक शैली विशेषता का पता लगाएं
2. बदलें इस विशेषता उन सभी के लिए (उदाहरण के लिए color:#333 से color:#444)।

क्या आपके पास ऐसा करने पर कोई सुझाव है?

Answer 1

मेरा सुझाव यह है कि यदि संभव हो तो यह करने से बचें। इसके बजाय, रंग मान असाइन करने के लिए कक्षा का उपयोग करें, और उसके बाद आप रंग मान के बजाए कक्षा का उपयोग कर तत्वों को देख सकते हैं।

जहां तक ​​मुझे पता है कर रहा हूँ, वहाँ कोई चयनकर्ता (नहीं CSS3 में भी) है कि आप एक विशिष्ट शैली मूल्य है, जो सभी तत्वों के माध्यम से पाशन का मतलब क्वेरी करने के लिए (या ऐसा लगता है कि आप इसे करने के सीमित कर सकते हैं का उपयोग कर सकते है style विशेषता वाले सभी तत्व) और element.style.color संपत्ति को देखते हुए। अब, बात यह है कि, भले ही आप color: #333; को अपने style विशेषता में लिखते हैं, फिर भी विभिन्न ब्राउज़र आपको विभिन्न तरीकों से वापस प्रतिबिंबित करेंगे। यह #333 हो सकता है, यह #333333 हो सकता है, यह rgb(51, 51, 51) हो सकता है, यह rgba(51, 51, 51, 0) भी हो सकता है।

तो पूरी तरह से, वास्तव में एक बहुत ही अजीब व्यायाम।

---

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

लेकिन उदाहरण के लिए:

(function() { 

    // Get all elements that have a style attribute 
    var elms = document.querySelectorAll("*[style]"); 

    // Loop through them 
    Array.prototype.forEach.call(elms, function(elm) { 
    // Get the color value 
    var clr = elm.style.color || ""; 

    // Remove all whitespace, make it all lower case 
    clr = clr.replace(/\s/g, "").toLowerCase(); 

    // Switch on the possible values we know of 
    switch (clr) { 
     case "#333": 
     case "#333333": 
     case "rgb(51,51,51)": // <=== This is the one Chrome seems to use 
     case "rgba(51,51,51,0)": 
     elm.style.color = "#444"; 
     break; 
    } 
    }); 
})(); 

Live example using red for clarity | source - ध्यान दें कि उदाहरण ES5 सुविधाओं और querySelectorAll पर निर्भर करता है, लेकिन चूंकि यह क्रोम है, मुझे पता है कि वे वहां हैं।

ध्यान दें कि उपर्युक्त शैली इनलाइन शैली मानती है, क्योंकि आपने style विशेषता के बारे में बात की थी। यदि आपका मतलब गणना शैली है, तो उसके लिए कुछ भी नहीं है, लेकिन getComputedStyle पर कॉल करने वाले पृष्ठ पर सभी तत्वों के माध्यम से लूप करने के लिए कुछ भी नहीं है। इसके अलावा, उपर्युक्त लागू होता है।

अंतिम नोट: यदि आप वास्तव में ठीक मूल्य color: #333 और नहीं मूल्य color:#333 या color:#333333; या color: #333; font-weight: bold या किसी अन्य तार के साथ एक शैली विशेषता का मतलब है, तो अपने querySelectorAll संभाल सकता है कि: querySelectorAll('*[style="color: #333"]')। लेकिन यह बहुत नाजुक होगा।

---

अपनी टिप्पणी से नीचे, तो यह आपको हर तत्व के माध्यम से जाने के लिए कर रहे हैं जैसा लगता है।

function walk(elm) { 
    var node; 

    // ...handle this element's `style` or `getComputedStyle`... 

    // Handle child elements 
    for (node = elm.firstChild; node; node = node.nextSibling) { 
     if (node.nodeType === 1) { // 1 == Element 
      walk(node); 
     } 
    } 
} 

// Kick it off starting with the `body` element 
walk(document.body); 

इस तरह आप बड़े, अनावश्यक अस्थायी संरचनाओं का निर्माण नहीं है: यदि हां, तो मैं querySelectorAll बिल्कुल का उपयोग नहीं होगा, मैं पुनरावर्ती वंश का उपयोग करेंगे। दस्तावेज के पूरे डोम को चलाने के लिए शायद यह सबसे प्रभावी तरीका है।

Answer 2

यदि आप ट्रैक करने के लिए इच्छित सभी तत्वों को कम से कम एक विशिष्ट सीएसएस क्लास नहीं जोड़ते हैं, तो आप नहीं कर सकते हैं।

या बेहतर, आप डोम के सभी तत्वों पर लूपिंग करके बहुत खराब प्रदर्शन कर सकते हैं जब तक कि आप जो खोज रहे हैं उसे प्राप्त न करें। लेकिन कृपया,

Answer 3

ऐसा करने के बारे में मत सोचें, यदि आप jquery का उपयोग करते हैं तो यह निश्चित रूप से अधिक सरल है। किसी भी मामले में, कक्षाओं का उपयोग करना सबसे अच्छा होगा और इच्छित वस्तुओं को प्राप्त करने के लिए filter jquery method का उपयोग करें।

लेकिन आप की तरह कुछ कर सकते हैं, तो आप वास्तव में उन्हें प्राप्त करना चाहते हैं:

$(function() { 
    $('p').filter(function() { 
     return $(this).css('color') == '#333'; 
    }).css('color', '#444'); 
}); 

ऊपर स्क्रिप्ट वांछित सीएसएस विशेषता के साथ तत्व मिल और एक नया सीएसएस विशेषता (रंग # 444) की स्थापना की।

Answer 4

जैसा कि पहले से ही रंग से सभी तत्वों से पूछताछ करने के लिए वास्तव में कठिन/अक्षम है।

// refrence: http://stackoverflow.com/questions/5999209/jquery-how-to-get-the-background-color-code-of-an-element 
var arr = []; 

$('*').each(function (i, ele) { 
    // is red => save 
    if($(ele).css('backgroundColor') == ('rgb(0, 0, 255)')) arr.push(ele); 
}); 

console.log(arr); 

यहाँ यह के लिए एक JSFiddle उदाहरण: http://jsfiddle.net/ddAg7/

इस के लिए मेरे सिफारिश है: ऐसा मत करो!

Answer 5

कुछ

$('selector').each(function() { 
    if($(this).attr('style').indexOf('font-weight') > -1) { 
     alert('got my attribute'); 
    } 
}); 

अगर बयान में

की तरह आप एक अलग सीएसएस के साथ बदलने सकता है ... सुनिश्चित नहीं हैं .. हालांकि :)