Javascript, CSS: get element attribute by style

Question

I would like to:

• Find the style attribute for all elements on the page (for example: all elements with color:#333; )
• Change this attribute for all of them (for example, from color:#333 to color:#444 ).

Do you have any suggestions on this?

Answer 1

My suggestion avoids this, if at all possible. Instead, use a class to assign a color value, and then you can search for elements using a class, not a color value.

As far as I know, there is no selector (even in CSS3) that you can use to request a specific style value, which means loop through all elements (or it looks like you can limit it to all elements with a style ) and look at the element.style.color property element.style.color . Now, even if you write color: #333; in its style attribute, different browsers will send it to you differently. It can be #333 , it can be #333333 , it can be rgb(51, 51, 51) , it can even be rgba(51, 51, 51, 0) .

All in all, a very uncomfortable exercise indeed.

---

Since you said that this is for the Chrome extension, you probably do not need to worry about several formats, although I would choose the ones we saw in the wild in case Chrome changes the format (possibly compatible with some other the browser that is known to have occurred).

But for example:

 (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 - Please note that the example is based on ES5 and querySelectorAll , but since it is Chrome, I know that they are there.

Note that the above assumes an inline style, because you were talking about the style attribute. If you mean the computed style, then there’s nothing for it but to scroll the all elements on the page calling getComputedStyle . In addition, the above applies.

Final note. If you really meant a style attribute with exactly the value color: #333 , and not the value color:#333 or color:#333333; or color: #333; font-weight: bold color: #333; font-weight: bold or any other string, your querySelectorAll could handle this: querySelectorAll('*[style="color: #333"]') . But that would be very fragile.

---

From your comment below, it looks like you need to go through each element. If so, I would not use querySelectorAll at all, I would use a recursive descent:

 function walk(elm) { var node; // ...handle this element `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); 

This way you are not creating large, unnecessary temporary structures. This is perhaps the most efficient way to move an entire DOM document.

Answer 2

It is definitely more simple if you use jquery. In any case, it is best to use classes and use the jquery method filter to get the objects you need.

But if you really want to get them, you can do something like:

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

The above scripts get the elements with the required css attribute and set the new css attribute (color # 444).

Answer 3

You cannot, unless you add at least a specific CSS class to all of these elements that you want to track.

Or better, you can, with very poor performance, get stuck in all the elements of the DOM until you find what you are looking for. But please don't think about it

Answer 4

This, as already mentioned, is very difficult / inefficient to request all the elements by 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); 

Here is a JSFiddle example for it: http://jsfiddle.net/ddAg7/

My recommendation for this: Do not do this!

Answer 5

Sort of

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

in the if expression you can replace it with another css ... Not sure .. did not try in all browsers though :)