In a recent project, I had to check whether the stylesheets attached to a document contain a particular class name. The X library (www.cross-browser.com) does not contain anything handling the stylesheets, so here's the necessary code (works in Internet Explorer and Firefox, Opera is broken).
Usage example:
xHasStyleSelector('.menuButton') will return true if any of the stylesheets attached to the document (including the inline stylesheets) contain definition of .menuButton.
// browser-independent stylesheet handling
// Copyright 2006 Ivan Pepelnjak (www.zaplana.net)
// Distributed under the terms of the GNU LGPL
// Copyright 2006 Ivan Pepelnjak (www.zaplana.net)
// Distributed under the terms of the GNU LGPL
//
// xGetStyleSheetFromLink - extracts style sheet object from the HTML LINK object (IE vs. DOM CSS level 2)
//
function xGetStyleSheetFromLink(cl) { return cl.styleSheet ? cl.styleSheet : cl.sheet; }
// xGetStyleSheetFromLink - extracts style sheet object from the HTML LINK object (IE vs. DOM CSS level 2)
//
function xGetStyleSheetFromLink(cl) { return cl.styleSheet ? cl.styleSheet : cl.sheet; }
//
// xGetCSSRules - extracts CSS rules from the style sheet object (IE vs. DOM CSS level 2)
//
function xGetCSSRules(ss) { return ss.rules ? ss.rules : ss.cssRules; }
// xGetCSSRules - extracts CSS rules from the style sheet object (IE vs. DOM CSS level 2)
//
function xGetCSSRules(ss) { return ss.rules ? ss.rules : ss.cssRules; }
//
// xHasStyleSheets - checks browser support for stylesheet related objects (IE or DOM compliant)
//
function xHasStyleSheets() {
return document.styleSheets ? true : false ;
}
//
// xTraverseStyleSheet (stylesheet, callback)
// traverses all rules in the stylesheet, calling callback function on each rule.
// recursively handles stylesheets imported with @import CSS directive
// stops when the callback function returns true (it has found what it's been looking for)
//
// returns:
// undefined - problems with CSS-related objects
// true - callback function returned true at least once
// false - callback function always returned false
//
function xTraverseStyleSheet(ss,cb) {
if (!ss) return false;
var rls = xGetCSSRules(ss) ; if (!rls) return undefined ;
var result;
for (var j = 0; j < rls.length; j++) {
var cr = rls[j];
if (cr.selectorText) { result = cb(cr); if (result) return true; }
if (cr.type && cr.type == 3 && cr.styleSheet) xTraverseStyleSheet(cr.styleSheet,cb);
}
if (ss.imports) {
for (var j = 0 ; j < ss.imports.length; j++) {
if (xTraverseStyleSheet(ss.imports[j],cb)) return true;
}
}
return false;
}
//
// xTraverseDocumentStyleSheets(callback)
// traverses all stylesheets attached to a document (linked as well as internal)
//
function xTraverseDocumentStyleSheets(cb) {
var ssList = document.styleSheets; if (!ssList) return undefined;
for (i = 0; i < ssList.length; i++) {
var ss = ssList[i] ; if (! ss) continue;
if (xTraverseStyleSheet(ss,cb)) return true;
}
return false;
}
// xHasStyleSheets - checks browser support for stylesheet related objects (IE or DOM compliant)
//
function xHasStyleSheets() {
return document.styleSheets ? true : false ;
}
//
// xTraverseStyleSheet (stylesheet, callback)
// traverses all rules in the stylesheet, calling callback function on each rule.
// recursively handles stylesheets imported with @import CSS directive
// stops when the callback function returns true (it has found what it's been looking for)
//
// returns:
// undefined - problems with CSS-related objects
// true - callback function returned true at least once
// false - callback function always returned false
//
function xTraverseStyleSheet(ss,cb) {
if (!ss) return false;
var rls = xGetCSSRules(ss) ; if (!rls) return undefined ;
var result;
for (var j = 0; j < rls.length; j++) {
var cr = rls[j];
if (cr.selectorText) { result = cb(cr); if (result) return true; }
if (cr.type && cr.type == 3 && cr.styleSheet) xTraverseStyleSheet(cr.styleSheet,cb);
}
if (ss.imports) {
for (var j = 0 ; j < ss.imports.length; j++) {
if (xTraverseStyleSheet(ss.imports[j],cb)) return true;
}
}
return false;
}
//
// xTraverseDocumentStyleSheets(callback)
// traverses all stylesheets attached to a document (linked as well as internal)
//
function xTraverseDocumentStyleSheets(cb) {
var ssList = document.styleSheets; if (!ssList) return undefined;
for (i = 0; i < ssList.length; i++) {
var ss = ssList[i] ; if (! ss) continue;
if (xTraverseStyleSheet(ss,cb)) return true;
}
return false;
}
//
// xHasStyleSelector(styleSelectorString)
// checks whether any of the stylesheets attached to the document contain the definition of the specified
// style selector (simple string matching at the moment)
//
// returns:
// undefined - style sheet scripting not supported by the browser
// true/false - found/not found
//
function xHasStyleSelector(ss) {
if (! xHasStyleSheets()) return undefined ;
// xHasStyleSelector(styleSelectorString)
// checks whether any of the stylesheets attached to the document contain the definition of the specified
// style selector (simple string matching at the moment)
//
// returns:
// undefined - style sheet scripting not supported by the browser
// true/false - found/not found
//
function xHasStyleSelector(ss) {
if (! xHasStyleSheets()) return undefined ;
function testSelector(cr) {
return cr.selectorText.indexOf(ss) >= 0;
}
return xTraverseDocumentStyleSheets(testSelector);
}
return cr.selectorText.indexOf(ss) >= 0;
}
return xTraverseDocumentStyleSheets(testSelector);
}
No comments:
Post a Comment