How to retrieve CSS style object by CSS class name?

Is it possible to get all properties of a css class associated with an element?

e.g.

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

Lets say the css class "hightlight" is assigned to div element

<div 开发者_运维百科class='highlight'></div>

Now using JavaScript, I need to iterate through all style properties of css class "highlight" associated with the div element. Basically, I want to treat it as a JavaScript object whose properties can be accessed using iterator or for loop.

Thanks in advance

---

it's relatively easy to build something like that with the normal DOM functionality. Here is an example:

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

However, rather than rolling your own, it's a better use of your time probably to examine jQuery selectors. Here is a good place to start. Here is the exact answer to your specific query with jQuery.

---

Firefox and chrome have

document.getElementsByClassName("whatever")

For IE you'll have to iterate through each ID and check if the class is what you want to use

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

---

This isn't as useful as you might think, you have to keep in mind inheritance and order, and styles applied directly to elements. But you can return all the css rules by their selectors, in IE7+ and most of the other browsers since then:

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

to make an object involves splitting up the pieces of the array

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'
}