如何通過CSS類名檢索CSS樣式對象？

是否有可能獲得與一個元素相關聯的CSS類的所有屬性？
例如如何通過CSS類名檢索CSS樣式對象？

.hightligh { 
    font-weight: bold; 
    border: 1px solid red; 
    padding-top:10px; 
}

讓說的CSS類「hightlight」被分配給div元素

<div class='highlight'></div>

現在使用JavaScript，我需要通過CSS類「亮點」與div元素相關聯的所有樣式屬性來遍歷。基本上，我想把它當作一個JavaScript對象，其屬性可以使用迭代器或for循環訪問。

在此先感謝

來源

2011-02-27 Chir

爲什麼要這樣做？如果你想知道這一點，那麼只需檢查螢火蟲中的元素。 – CarneyCode 2011-02-27 05:29:08

如果您正在尋找通過樣式表設置的值，那麼沒有快速修復（我知道）來獲取這些樣式。但是，這裏有一個代碼片段，它提取了特定元素的計算樣式（Firebug使用類似這樣的東西）。 http://www.quirksmode.org/dom/getstyles.html#link7 – 2011-02-27 05:30:19

它相對容易建立類似的東西與普通的DOM功能。這裏有一個例子：

document.getElementsByClassName = function(cl) { 
var retnode = []; 
var myclass = new RegExp('\\b'+cl+'\\b'); 
var elem = this.getElementsByTagName('*'); 
for (var i = 0; i < elem.length; i++) { 
var classes = elem[i].className; 
if (myclass.test(classes)) retnode.push(elem[i]); 
} 
return retnode; 
};

然而，而不是滾動您自己，這是一個更好地利用你的時間大概要檢查jQuery選擇。 Here是一個很好的開始。這裏是the exact answer用於jQuery的特定查詢。

來源

2011-02-27 05:30:05 t3rse

沒有必要建議一個完全成熟的庫，因爲這個過於簡單。 – AlanFoster 2011-02-27 05:32:54

@ user551841這就是爲什麼我點頭向jQuery。 – t3rse 2011-02-27 05:33:56

Firefox和Chrome都

document.getElementsByClassName("whatever")

對於IE你必須通過每個ID進行迭代，並檢查類是你想用什麼

var elems = document.getElementsByTagName("*"); 
     for(var i = 0; i < elems.length;i++) 
      if(elems[i].className == nameRequired) 
       return elems[i]

來源

2011-02-27 05:31:50 AlanFoster

IE8支持'document.querySelectorAll'。它有不同的功能，但可以使用它（jQuery使用它）通過類名獲取項目。 – 2011-02-27 05:34:02

這不回答問題。 Chir想要迭代對應於該類的div的樣式屬性。 – ehsanul 2011-02-27 05:35:17

@Matt McDonald *感謝致謝。 – AlanFoster 2011-02-27 05:37:39

這是不是有用如你所想，你必須記住繼承和順序，以及直接應用於元素的樣式。但是你可以通過自己的選擇和大多數其他瀏覽器，因爲再返回所有的CSS規則，在IE7 +：

function getRules(rx){ 
    var A= [], tem, R= this.cssRules || this.rules, L= R.length; 
    if(typeof rx== 'string') rx= new RegExp('\\b'+rx+'(,|$)', 'i'); 
    while(L){ 
     tem= R[--L] || ''; 
     if(tem.selectorText && rx.test(tem.selectorText)){ 
      A[A.length]= tem.style.cssText || ''; 
     } 
    } 
    return A; 
} 
function getAllRules(sel){ 
    var A= [], S= document.styleSheets, L= S.length, tem; 
    while(L){ 
     tem= getRules.call(S[--L], sel); 
     while(tem.length){ 
      A[A.length]= tem.shift(); 
     } 
    } 
    A= A.join(';').split(/;+\s*/); 
    return A; 
} 



getAllRules('body')// element selector 
getAllRules('#p_opts')//id selector 
getAllRules('.emhooCss')// class selector 
getAllRules('#ul_tree h4 span')// descendent selector 
getAllRules(/\b(body|div|p)\b/i)//rx for multiple selectors

使對象涉及分裂陣列

function Cssruler(sel){ 
    var R= getAllRules(sel), L= R.length, tem; 
    while(L){ 
     tem= R[L--] || ''; 
     tem= tem.split(/\s*\:\s*/); 
     if(tem.length== 2) this[tem[0]]= tem[1]; 
    } 
    this.selector= sel; 
}

VAR的碎片R = new Cssruler（'body'）

R contains an object like this: 

{ 
    background: 'none repeat scroll 0% 0% rgb(250, 250, 250)', 
    background-color: 'black', 
    background-image: 'url("starynte.gif")', 
    color: 'black', 
    left: '0pt', 
    margin: '0pt', 
    padding-top: '2.5em', 
    right: '0pt', 
    selector: 'body', 
    width: 'auto' 
}

來源

2011-02-27 06:11:35 kennebec

如何通過CSS類名檢索CSS樣式對象？

回答

相關問題