JAVASCRIPT，CSS：通過樣式屬性獲取元素

Question

我想：

1. 查找頁面中所有元素的樣式屬性（例如：有color:#333;所有元素）
2. 更改此屬性（例如從color:#333到color:#444）。

你有什麼建議嗎？

Answer 1

我的建議是避免這樣做，如果在所有遠程可能。相反，使用一個類來分配顏色值，然後可以使用該類查找元素，而不是顏色值。

據我所知，沒有選擇器（即使在CSS3中），你可以用它來查詢樣式值，這意味着循環遍歷所有元素所有具有style屬性的元素）並查看element.style.color屬性。現在，即使您在style屬性中編寫了color: #333;，不同的瀏覽器也會以不同的方式回顯給您。它可能是#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; 
    } 
    }); 
})(); 

Live example using red for clarity | source - 請注意，該示例依賴於ES5功能和querySelectorAll，但由於這是Chrome，我知道它們在那裏。

請注意，上面假定內聯樣式，因爲您談到了style屬性。如果你的意思是計算風格，那麼沒有什麼可以，但通過所有元素在頁面上調用getComputedStyle。除此之外，上述內容適用。

最後說明一點：如果你真的意味着樣式屬性與精確值color: #333，而不是價值color:#333或color:#333333;或color: #333; font-weight: bold或任何其他字符串，你querySelectorAll可以搞定：querySelectorAll('*[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的最有效方式。

Answer 2

如果您不想爲要跟蹤的所有這些元素添加至少一個特定的CSS類，則不能。或者更好，你可以通過在DOM的所有元素上循環來表現非常差的表現，直到找到你要找的東西。 但是，請不要這樣想

Answer 3

這絕對是更簡單，如果你使用jQuery。 在任何情況下，最好的方法是使用類並使用filter jquery method來獲得所需的對象。

但如果你真的想要得到他們，你可以這樣做：

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

上述腳本得到與所需的CSS屬性的元素，並設置一個新的CSS屬性（顏色爲＃444）。

Answer 4

正如已經說過的，通過顏色查詢所有元素確實很難/效率低下。

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

我這個建議是：不要這樣做！

Answer 5

喜歡的東西

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

if語句

你可以用不同的CSS取代它...不知道..沒有嘗試過所有的瀏覽器雖然:)