Javascript, CSS: Get elemento da attributo style

Question

vorrei:

1. Trova un attributo di stile per tutti gli elementi nella pagina (per esempio: tutti gli elementi che hanno color:#333;)
2. Modifica questo attributo per tutti (ad esempio da color:#333 a color:#444).

Avete qualche suggerimento per farlo?

Answer 1

Il mio suggerimento è di evitare di farlo se possibile a distanza. Invece, usa una classe per assegnare il valore del colore, e quindi puoi cercare gli elementi usando la classe, piuttosto che il valore del colore.

Per quanto io sappia, non c'è selettore (nemmeno in CSS3) che è possibile utilizzare per interrogare uno specifico valore stile, che significa scorrendo tutti gli elementi (o sembra che si può limitare a tutti gli elementi con un attributo style) e guardando la proprietà element.style.color. Ora, il fatto è che, anche se scrivi color: #333; nell'attributo style, diversi browser ti rispediranno a te in diversi modi. Potrebbe essere #333, potrebbe essere #333333, potrebbe essere rgb(51, 51, 51), potrebbe anche essere rgba(51, 51, 51, 0).

Quindi, nel complesso, un esercizio davvero imbarazzante.

---

Dal momento che hai detto che questo è per un estensione Chrome, probabilmente non c'è bisogno di preoccuparsi tanto per diversi formati, anche se mi piacerebbe buttarmi in quelle che abbiamo visto allo stato selvatico in caso Chrome cambia il formato (forse per essere coerente con qualche altro browser, che è noto per accadere).

Ma per esempio:

(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 - Si noti che l'esempio si basa sulle funzioni e querySelectorAll, ma poiché questo è Chrome, so che ci sono.

Nota che quanto sopra presuppone lo stile in linea, perché hai parlato dell'attributo style. Se intendi lo stile calcolato, non c'è nulla per questo, ma per scorrere attraverso tutti gli elementi nella pagina chiamando getComputedStyle. Oltre a ciò, vale quanto sopra.

Nota finale: se davvero si intende un attributo style con precisione il valore color: #333 e non il valore color:#333 o color:#333333; o color: #333; font-weight: bold o qualsiasi altra stringa, il vostro querySelectorAll in grado di gestire che: querySelectorAll('*[style="color: #333"]'). Ma sarebbe molto fragile.

---

Dal tuo commento qui sotto, sembra che tu stai dover passare attraverso ogni elemento.Se è così, non vorrei usare querySelectorAll a tutti, userei discesa ricorsiva:

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); 

In questo modo non si accumulano grandi strutture temporanei non necessari. Questo è probabilmente il modo più efficiente per percorrere l'intero DOM di un documento.

Answer 2

Non è possibile, se non si aggiunge almeno una specifica classe CSS a tutti gli elementi che si desidera tracciare.

O meglio, è possibile con prestazioni molto povere, collegando su tutti gli elementi del DOM fino a trovare quello che stai cercando. Ma per favore, non pensare di farlo

Answer 3

È decisamente più semplice se usi jquery. In ogni caso, il migliore sarebbe utilizzare le classi e utilizzare lo filter jquery method per ottenere gli oggetti desiderati.

Ma se si vuole davvero ottenere loro si può fare qualcosa di simile:

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

Lo script precedente ottenere gli elementi con l'attributo CSS desiderato e impostare un nuovo attributo CSS (colore # 444).

Answer 4

Come già detto, è davvero difficile/inefficiente interrogare tutti gli elementi per colore.

// 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); 

Ecco un esempio JSFiddle per esso: http://jsfiddle.net/ddAg7/

La mia raccomandazione per questo è: Non fatelo!

Answer 5

Qualcosa di simile

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

nel if si potesse sostituirlo con un css diverso ... Non sono sicuro .. non hanno provato in tutti i browser però :)