通過CSS風格選擇元素（全部使用給定樣式）

有沒有辦法使用JavaScript選擇具有給定樣式的所有元素？通過CSS風格選擇元素（全部使用給定樣式）

例如，我希望頁面上的所有絕對定位元素。

我會假設它更容易找到風格元素，其中的風格是明確宣佈：

風格非遺傳（如定位）
的風格是不是默認（如位置：靜態）。

我只限於這些規則嗎？那些規則適用的時候有更好的方法嗎？

我將愉快地使用一個選擇器引擎，如果這是一個提供（理想油滑 - Mootools的1.3）

編輯：
我想出了一個解決方案，將只與上述規則的工作。
它通過循環遍歷每個樣式規則，然後在頁面上進行選擇。
任何人都可以告訴我，如果這是更好地循環通過所有元素（如所有解決方案中推薦）。
我知道，在IE中，我必須將樣式更改爲小寫，但我可以使用cssText一次解析所有樣式。爲了簡單起見，請留下。
尋找最佳實踐。

var classes = ''; 
Array.each(documents.stylesheets, function(sheet){ 
    Array.each(sheet.rules || sheet.cssRules, function(rule){ 
     if (rule.style.position == 'fixed') classes += rule.selectorText + ','; 
    }); 
}); 
var styleEls = $$(classes).combine($$('[style*=fixed]'));

來源

2010-07-15 SamGoody

@samgoody你的要點是混亂。第一個人做出各種假設，然後第二個人似乎放棄了 - 「沒有做出所述假設」:) – Anurag 2010-07-15 21:36:42

@Auurag。你絕對正確。謝謝。固定。（我希望，是更好的嗎？） – SamGoody 2010-07-16 06:43:29

你的方法似乎更快，因爲每個元素的'css'或'getStyle'調用導致調用本地'getComputedStyle'，這很耗時。事實上，CSS規則OTOH已經被解析過了，它只是循環它們的問題。 – Anurag 2010-07-18 18:05:27

對於MooTools的：

var styleEls = $$('*').filter(function(item) { 
    return item.getStyle('position') == 'absolute'; 
});

來源

2010-07-15 21:43:44 ScottS

+1：它[作品]（http://jsfiddle.net/nrqhS/），很優雅，實際上是mootools - 提問者的首選庫。 – 2010-07-15 21:52:23

沒有爲CSS屬性沒有選擇，所以你幾乎卡住通過每個元素的循環，並檢查它的位置。

$("*").each(function() { 
    var pos = $(this).css('position'); 
    if(pos == "absolute") { 
     // do something 
    } 
    else if (pos == "relative") { 
     // do something else 
    } 
});

您可以使用Case語句而不是if/else。

除了這個解決方案，沒有選擇器本身可以通過CSS屬性進行搜索（除非它們是內聯的，也許）。

來源

2010-07-15 21:33:00 Marko

我對JQuery沒有任何問題，但你應該指定你正在使用它 - 我去搜索找出.css（）函數是什麼。 – SamGoody 2010-07-16 07:07:07

在jQuery中可以使用

$('*').filter(function(){ 
    return ($(this).css('position') == 'absolute'); 
});

[更新]

甚至創造一個新的選擇。
讓我感興趣，所以這裏是一個（它的我的第一個，所以它沒有爲效率建造）找到元素的CSS屬性..

$.expr[':'].css = function(obj, index, meta, stack){ 
    var params = meta[3].split(','); 

    return ($(obj).css(params[0]) == params[1]); 
};

用法：$('optionalSelector:css(property,value)')
將返回所有元件，其屬性=值

例如（optionalSelector的）：var visibleDivs = $('div:css(visibility,visible)');
將返回其可見性被設定爲可見光的所有div（ 適用於默認的可見度以及..）

來源

2010-07-15 21:36:45

您可以繼續Mootools的，或者任何你使用... :)

function getStyle(el, prop) { 
    var view = document.defaultView; 
    if (view && view.getComputedStyle) { 
    return view.getComputedStyle(el, null)[prop]; 
    } 
    return el.currentStyle[prop]; 
} 

function getElementByStyle(style, value, tag) { 
    var all = document.getElementsByTagName(tag || "*"); 
    var len = all.length; 
    var result = []; 
    for (var i = 0; i < len; i++) { 
    if (getStyle(all[i], style) === value) 
     result.push(all[i]); 
    } 
    return result; 
}

來源

2010-07-15 21:41:49 galambalazs

通過CSS風格選擇元素（全部使用給定樣式）

回答

相關問題