ksevern

I have access to an element and it's class name. I need to know how to find out what width is specified by the class (in the CSS style sheet). When I check obj.style.width it returns nothing but the class in the style sheet does specify a width. I have a clunky solution that will eventually give me what I need from Firefox but it's not working in IE and I'd like something more efficient. IE breaks down on the cssRules.length call. Any ideas I hope I'm barking up the wrong tree entirely. Here's the code:

var cssRule = getCSSRuleFromStyleSheet(sSheet, "div." + contentObj.className, true);

.................

function getStyleSheetFromDoc(docObj, filename)
{
var sheet = null;
//alert("getStyleSheetFromDoc("+docObj+", "+filename+") docObj.styleSheets.length=["+docObj.styleSheets.length+"]");
for (var i = 0; i < docObj.styleSheets.length; i++)
{
if (docObj.styleSheetsIdea.href.indexOf(filename) != -1)
{
alert("docObj.styleSheets["+i+"].href=["+docObj.styleSheetsIdea.href+"]");
sheet = docObj.styleSheetsIdea;
break;
}
}
return sheet;
}

function getCSSRuleFromStyleSheet(sheet, ruleName, equals)
{
var rule = null;
for (var i = 0; i < sheet.cssRules.length; i++)
{
if (sheet.cssRulesIdea.selectorText.indexOf(ruleName) != -1) alert("ruleName=["+ruleName+"]\n sheet.cssRules["+i+"].selectorText=["+sheet.cssRulesIdea.selectorText+"]\n cssText=["+sheet.cssRulesIdea.cssText+"]\n parentRule=["+sheet.cssRulesIdea.parentRule+"]\n type=["+sheet.cssRulesIdea.type+"]");
var test = equals
(sheet.cssRulesIdea.selectorText == ruleName)
: (sheet.cssRulesIdea.selectorText.indexOf(ruleName) != -1);
if (test)
{
alert("score");
rule = sheet.cssRulesIdea;
break;
}
}
return rule;
}



Re: Internet Explorer Web Development How to determine the style of an element specified via the CSS class?

mxpt3c

I've always needed to know the answer to this question as well, so I did some research and discovered in text what I already was concluding from empirical evidence:
.style accesses the*inline* style of an element only
As you can see here in the Mozilla developer center beta, the DOM level 2 specification contains the helpful window method getComputedStyle which is like the offsetParent property in that it returns a value based on the *real time*style at the time the method is called. However, this doesn't fix your internet explorer problem, as ie6 doesn't support it. However you may be in luck as, also stated by PPK (one of myfavorite Javascript gurus ever), internet explorer 6 supports a"currentStyle" property. Check out the documentation at the link above. Hey, now I learned something I really needed to know!