16

そうしたいです：

  1. ページ内のすべての要素のスタイル属性を検索します（例：を持っているすべての要素color:#333;）
  2. それらすべてのこの属性を変更します（たとえば、color:#333からcolor:#444）。

そうすることについて何か提案はありますか？

4

5 に答える 5

19

私の提案は、リモートで可能な限りこれを行わないようにすることです。代わりに、クラスを使用して色の値を割り当ててください。そうすれば、色の値ではなく、クラスを使用して要素を検索できます。

私の知る限り、特定styleのスタイル値をクエリするために使用できるセレクターはありません（CSS3でも）。つまり、すべての要素をループします（または、属性を持つすべての要素に制限できるように見えます）。と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;
    }
  });
})();

わかりやすくするために赤を使用した実例| ソース-例はES5の機能とに依存していることに注意してくださいquerySelectorAll。ただし、これはChromeであるため、それらが存在することはわかっています。

style属性について説明したため、上記はインラインスタイルを想定していることに注意してください。計算されたスタイルを意味する場合は、を呼び出すページ上のすべての要素をループする以外に何もありませんgetComputedStyle。それ以外は、上記が適用されます。

最後の注意：値やその他の文字列でcolor: #333はなく、正確に値を持つスタイル属性を本当に意味している場合は、それを処理できます。しかし、それは非常に壊れやすいでしょう。color:#333color:#333333;color: #333; font-weight: boldquerySelectorAllquerySelectorAll('*[style="color: #333"]')

以下のコメントから、すべての要素を通過する必要があるように思われます。もしそうなら、私はまったく使用querySelectorAllしません、私は再帰下降を使用します：

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

そうすれば、大きくて不要な一時的な構造を構築する必要がありません。これはおそらく、ドキュメントのDOM全体を歩くための最も効率的な方法です。

于 2012-05-26T15:55:43.353 に答える
7

jqueryを使えばもっと簡単です。いずれにせよ、クラスを使用し、フィルター jquery メソッドを使用して必要なオブジェクトを取得するのが最善です。

しかし、本当にそれらを取得したい場合は、次のようにすることができます。

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

上記のスクリプトは、目的の css 属性を持つ要素を取得し、新しい css 属性 (色 #444) を設定します。

于 2012-05-26T16:00:30.303 に答える
0

何かのようなもの

$（'selector'）。each（function（）{
    if（$（this）.attr（'style'）。indexOf（'font-weight'）> -1）{
        alert（'属性を取得しました'）;
    }
}）;

ifステートメントで別のcssに置き換えることができます...わからない..すべてのブラウザで試したわけではありませんが:)

于 2012-05-26T16:11:49.227 に答える
0

追跡したいこのすべての要素に少なくとも特定の CSS クラスを追加しないと、できません。

または、探しているものが見つかるまで DOM のすべての要素をループすることで、パフォーマンスが非常に悪くなります。しかし、どうか、これを行うことを考えないでください

于 2012-05-26T15:56:27.577 に答える
0

すでに述べたように、すべての要素を色で照会するのは非常に困難/非効率的です。

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

これに対する私の推奨事項は次のとおりです。

于 2012-05-26T16:03:19.150 に答える