Javascript、CSS: スタイル属性で要素を取得する 質問する

私の提案は、可能な限りこれを避けることです。代わりに、クラスを使用して色の値を割り当て、色の値ではなくクラスを使用して要素を検索できるようにします。

私の知る限り、CSS3でさえも、クエリに使用できるセレクタは存在しません。特定のスタイル値、つまりすべての要素をループして (または、属性を持つすべての要素に制限できるようですstyle)、element.style.colorプロパティを確認します。ここで問題となるのは、属性color: #333;に記述したとしてもstyle、ブラウザーが異なれば、その記述がさまざまな方法で返されるということです。 、#333、#333333、 などrgb(51, 51, 51)、 になる可能性もありますrgba(51, 51, 51, 0)。

全体的に、実に厄介な練習です。

これは Chrome 拡張機能用だとおっしゃっているので、複数の形式についてそれほど心配する必要はないと思いますが、Chrome が形式を変更する場合（他のブラウザとの一貫性を保つためなど、よくあることです）に備えて、実際に使用されている形式も入れておきます。

しかし、例えば:

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

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