Javascript, CSS: Obtener elemento de atributo de estilo

Question

me gustaría:

1. Encuentra un atributo de estilo para todos los elementos de la página (por ejemplo: todos los elementos que tienen color:#333;)
2. Cambiar este atributo para todos ellos (por ejemplo, de color:#333 a color:#444).

¿Tiene alguna sugerencia para hacerlo?

Answer 1

Mi sugerencia es evitar hacer esto si es posible remotamente. En su lugar, use una clase para asignar el valor del color, y luego puede buscar los elementos usando la clase, en lugar del valor del color.

Por lo que yo sé, no hay selector (ni siquiera en CSS 3) que se puede utilizar para consultar un determinado valor estilo, lo que significa bucle a través de todos los elementos (o parece que se puede limitar a todos los elementos con un atributo style) y mirando la propiedad element.style.color. Ahora, el asunto es que, aunque escriba color: #333; en su atributo style, los diferentes navegadores le responderán de diferentes maneras. Puede ser #333, podría ser #333333, podría ser rgb(51, 51, 51), incluso podría ser rgba(51, 51, 51, 0).

Así que, en general, es un ejercicio muy incómodo.

---

Puesto que usted ha dicho que esta es una extensión de Chrome, es probable que no tiene que preocuparse tanto de múltiples formatos, aunque me tiraría en los que nos hemos visto en estado salvaje en caso Chrome cambia el formato (tal vez para ser coherente con algún otro navegador, que se sabe que ocurre).

Pero, por ejemplo:

(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 - Tenga en cuenta que el ejemplo se basa en las características ES5 y querySelectorAll, pero como esto es Chrome, sé que están allí.

Tenga en cuenta que lo anterior supone un estilo en línea, porque ha hablado del atributo style. Si se refiere a calculado estilo, entonces no hay nada más que para recorrer todos los elementos en la página llamando al getComputedStyle. Aparte de eso, aplica lo anterior.

Nota final: Si realmente se quiere decir un atributo de estilo con precisión el valor color: #333 y no el valor color:#333 o color:#333333; o color: #333; font-weight: bold o cualquier otra cadena, su querySelectorAll podría manejar eso: querySelectorAll('*[style="color: #333"]'). Pero sería muy frágil.

---

Desde su comentario a continuación, parece que va a tener que pasar por todos los elemento.Si es así, yo no usaría querySelectorAll en absoluto, que haría uso de descenso recursivo:

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

De esa manera usted no se acumulan grandes estructuras temporales e innecesarios. Esta es probablemente la forma más eficiente de recorrer todo el DOM de un documento.

Answer 2

No puede, si no agrega al menos una clase de CSS específica a todos estos elementos que desea rastrear.

O mejor aún, puedes realizar interpretaciones muy pobres haciendo un bucle en todos los elementos del DOM hasta que encuentres lo que estás buscando. Pero, por favor, no piense en hacer esto

Answer 3

Definitivamente es más simple si usa jquery. En cualquier caso, lo mejor sería usar clases y usar el filter jquery method para obtener los objetos que desea.

Pero si realmente quiere conseguir que se puede hacer algo como:

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

El script anterior obtener los elementos con el atributo css deseado y establece un nuevo atributo css (color # 444).

Answer 4

Como ya he dicho, es muy difícil/ineficiente consultar todos los elementos por color.

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

Este es un ejemplo jsFiddle para ello: http://jsfiddle.net/ddAg7/

Mi recomendación para esto es: no lo hagas!

Answer 5

Algo así como

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

en la sentencia if usted podría reemplazarlo con un css diferente ... No estoy seguro .. no lo han intentado en todos los navegadores aunque :)