Return to Snippet

Revision: 7218
at May 3, 2010 13:49 by wizard04


Updated Code
//****************************************************************
//*************************** Styles *****************************
//****************************************************************

//IE doesn't support access to pseudoElement styles, so we won't use them at all (we'll pass null to
// window.getComputedStyle())

//get the computed styles of an element
function getStylesOf(elem)
{
	var s = window.getComputedStyle ? window.getComputedStyle(elem, null) : elem.currentStyle;
	var float = s.cssFloat || s.styleFloat || s.float;
	s.cssFloat = s.styleFloat = s.float = float;
	return s;
}

//set/get float style for an element
//the property isn't named "float", as would be obvious
//`float` argument is optional
function floatStyle(elem, float)
{
	var s = elem.style;
	if(float == "none" || float == "left" || float == "right")
	{
		if("cssFloat" in s) s.cssFloat = float;	//all but IE
		if("styleFloat" in s) s.styleFloat = float;	//IE and Opera
		if("float" in s) s.float = float;	//Safari and Chrome
	}
	return s.cssFloat || s.styleFloat || s.float;
}

//****************************************************************
//******************** Alternate Stylesheets *********************
//****************************************************************

//enables the stylesheet with the specified title; disables all other stylesheets that have a title
function setActiveStyleSheet(toTitle)
{
	var sse = getStyleSheetElements();
	var ss = null;
	for(var i=0; i<sse.length; i++)
	{
		if(sse[i].title == toTitle)
		{
			ss = sse[i];
			break;
		}
	}
	if(!ss) return false;	//not found
	enableStyleSheet(ss);
	//disable all other stylesheets that have a title
	for(i=0; i<sse.length; i++)
	{
		if(sse[i] != ss && sse[i].title != "") disableStyleSheet(sse[i]);
	}
	return true;
}

//returns the active stylesheet (element)
function getActiveStyleSheet()
{
	var sse = getStyleSheetElements();
	for(var i=0; i<sse.length; i++)
	{
		if(sse[i].title && !sse[i].disabled) return sse[i];
	}
	return null;
}

//****************************************************************
//****************** Enable/Disable Stylesheet *******************
//****************************************************************

//sheet can be either an index or a stylesheet object
function disableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	ss.disabled = true;
}

//sheet can be either an index or a stylesheet object
function enableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	
	//note: in all but Firefox, the stylesheet must have been explicitly disabled before it can be enabled
	// (e.g., if it was an alternate stylesheet, it wasn't enabled to begin with but wasn't explicitly disabled either
	// for some reason)
	
	ss.disabled = true;	//in case it hasn't yet been explicitly disabled
	ss.disabled = false;
}

//****************************************************************
//*********************** Get Stylesheet *************************
//****************************************************************

//Safari doesn't count alternate stylesheets that aren't enabled, so we have to find them manually
//this function only returns the DOM elements; not the actual stylesheets
function getStyleSheetElements()
{
	var stylesheets = [];
	var elems = document.getElementsByTagName("head")[0].childNodes;
	for(var i=0; i<elems.length; i++)
	{
		if(elems[i].nodeType == 1)	//it's an element node
		{
			if(elems[i].tagName.toLowerCase() == "style" ||
			 (elems[i].tagName.toLowerCase() == "link" && /(^|\s)stylesheet(\s|$)/i.test(elems[i].rel)) )
			{
				stylesheets.push(elems[i]);
			}
		}
	}
	return stylesheets;
}

//get the stylesheet, or null if it doesn't exist or can't be accessed
function getStyleSheet(sheetIndex)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		if(sheetIndex < ss.length) return document.styleSheets[sheetIndex];
		return null;	//not found; sheetIndex is too large
	}
	else	//Safari (it doesn't count stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length && iSafari<document.styleSheets.length; i++)
		{
			//if(ss[i].disabled !== false)	//ss[i].disabled for an alternate stylesheet is initially false even though it's not enabled
			if(ss[i].href != document.styleSheets[iSafari].href)	//stylesheet not enabled
			{
				if(i == sheetIndex) return null;	//Safari can't access this stylesheet
			}
			else
			{
				if(i == sheetIndex) return document.styleSheets[iSafari];
				iSafari++;
			}
		}
		return null;	//not found; sheetIndex is too large
	}
}

//get the stylesheet with specified title, or null if it doesn't exist or can't be accessed
function getStyleSheetByTitle(sheetTitle)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		for(var i=0; i<ss.length; i++)
		{
			if(ss[i].title == sheetTitle) return document.styleSheets[i];
		}
		return null;	//not found
	}
	else	//Safari (it doesn't count stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length; i++)
		{
			//if(ss[i].disabled !== false)	//ss[i].disabled for an alternate stylesheet is initially false even though it's not enabled
			if(ss[i].href != document.styleSheets[iSafari].href)	//stylesheet not enabled
			{
				if(ss[i].title == sheetTitle) return null;	//Safari can't access this stylesheet
			}
			else
			{
				if(ss[i].title == sheetTitle) return document.styleSheets[iSafari];
				iSafari++;
			}
		}
		return null;	//not found
	}
}

//****************************************************************
//*************************** Rules ******************************
//****************************************************************

//browser bugs/incompatibilities galore; use at your own risk
//note: IE splits up selectors at the commas, so a single rule may be split into multiple rules
//note: .cssRules includes @import rules, but in IE they're in .imports instead
//sheet can be either an index or a stylesheet object
function getStyleSheetRules(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return null;
	return ss.cssRules || ss.rules;
}
//rules can be modified like this:
//var rules = getStyleSheetRules(0);	//get the rules in the first stylesheet
//rules[0].style.height = "25px";	//in the first rule, set the height

//add a rule to the end of a stylesheet
//note: IE's method (and consequently this function) puts the rule at the end of the stylesheet; you can't position it
// where you want
//sheet can be either an index or a stylesheet object
function appendStyleSheetRule(sheet, selector, properties)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.insertRule) ss.insertRule(selector+" { "+properties+" }", ss.cssRules.length);
	else ss.addRule(selector, properties);	//IE
	return true;
}

//sheet can be either an index or a stylesheet object
function deleteStyleSheetRule(sheet, ruleIndex)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.deleteRule) ss.deleteRule(ruleIndex);
	else ss.removeRule(ruleIndex);	//IE
	return true;
}

//****************************************************************
//************************** CSS Text ****************************
//****************************************************************

//to get the selector text of a rule: ruleObject.selectorText
//to get the properties text of a rule: ruleObject.style.cssText
//to get the properties text of an inline element: elem.style.cssText

//gets the full text of a rule (including selector)
function getRuleText(ruleObject)
{
	if(!ruleObject) return "";
	if(ruleObject.cssText) return ruleObject.cssText;
	return ruleObject.selectorText+" { "+ruleObject.style.cssText+" }";
}

//gets the full text of a stylesheet
//sheet can be either an index or a stylesheet object
function getStyleSheetText(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return "";
	if(ss.cssText) return ss.cssText;	//IE
	var txt = "";
	var rules = getStyleSheetRules(ss);
	for(var i=0; i<rules.length; i++)
	{
		txt += getRuleText(rules[i])+" ";
	}
	return txt;
}

Revision: 7217
at April 30, 2010 13:59 by wizard04


Updated Code
//****************************************************************
//*************************** Styles *****************************
//****************************************************************

//IE doesn't support access to pseudoElement styles, so we won't use them at all (we'll pass null to
// window.getComputedStyle())

//get the computed styles of an element
function getStylesOf(elem)
{
	if(window.getComputedStyle) return window.getComputedStyle(elem, null);
	return elem.currentStyle;	//IE
}

//set/get float style for an element
//the property isn't named "float", as would be obvious
//`float` argument is optional
function floatStyle(elem, float)
{
	var s = elem.style;
	if(float == "none" || float == "left" || float == "right")
	{
		if("cssFloat" in s) s.cssFloat = float;	//all but IE
		if("styleFloat" in s) s.styleFloat = float;	//IE and Opera
		if("float" in s) s.float = float;	//Safari and Chrome
	}
	return s.cssFloat || s.styleFloat || s.float;
}

//****************************************************************
//******************** Alternate Stylesheets *********************
//****************************************************************

//enables the stylesheet with the specified title; disables all other stylesheets that have a title
function setActiveStyleSheet(toTitle)
{
	var sse = getStyleSheetElements();
	var ss = null;
	for(var i=0; i<sse.length; i++)
	{
		if(sse[i].title == toTitle)
		{
			ss = sse[i];
			break;
		}
	}
	if(!ss) return false;	//not found
	enableStyleSheet(ss);
	//disable all other stylesheets that have a title
	for(i=0; i<sse.length; i++)
	{
		if(sse[i] != ss && sse[i].title != "") disableStyleSheet(sse[i]);
	}
	return true;
}

//returns the active stylesheet (element)
function getActiveStyleSheet()
{
	var sse = getStyleSheetElements();
	for(var i=0; i<sse.length; i++)
	{
		if(sse[i].title && !sse[i].disabled) return sse[i];
	}
	return null;
}

//****************************************************************
//****************** Enable/Disable Stylesheet *******************
//****************************************************************

//sheet can be either an index or a stylesheet object
function disableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	ss.disabled = true;
}

//sheet can be either an index or a stylesheet object
function enableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	
	//note: in all but Firefox, the stylesheet must have been explicitly disabled before it can be enabled
	// (e.g., if it was an alternate stylesheet, it wasn't enabled to begin with but wasn't explicitly disabled either
	// for some reason)
	
	ss.disabled = true;	//in case it hasn't yet been explicitly disabled
	ss.disabled = false;
}

//****************************************************************
//*********************** Get Stylesheet *************************
//****************************************************************

//Safari doesn't count alternate stylesheets that aren't enabled, so we have to find them manually
//this function only returns the DOM elements; not the actual stylesheets
function getStyleSheetElements()
{
	var stylesheets = [];
	var elems = document.getElementsByTagName("head")[0].childNodes;
	for(var i=0; i<elems.length; i++)
	{
		if(elems[i].nodeType == 1)	//it's an element node
		{
			if(elems[i].tagName.toLowerCase() == "style" ||
			 (elems[i].tagName.toLowerCase() == "link" && /(^|\s)stylesheet(\s|$)/i.test(elems[i].rel)) )
			{
				stylesheets.push(elems[i]);
			}
		}
	}
	return stylesheets;
}

//get the stylesheet, or null if it doesn't exist or can't be accessed
function getStyleSheet(sheetIndex)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		if(sheetIndex < ss.length) return document.styleSheets[sheetIndex];
		return null;	//not found; sheetIndex is too large
	}
	else	//Safari (it doesn't count stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length && iSafari<document.styleSheets.length; i++)
		{
			//if(ss[i].disabled !== false)	//ss[i].disabled for an alternate stylesheet is initially false even though it's not enabled
			if(ss[i].href != document.styleSheets[iSafari].href)	//stylesheet not enabled
			{
				if(i == sheetIndex) return null;	//Safari can't access this stylesheet
			}
			else
			{
				if(i == sheetIndex) return document.styleSheets[iSafari];
				iSafari++;
			}
		}
		return null;	//not found; sheetIndex is too large
	}
}

//get the stylesheet with specified title, or null if it doesn't exist or can't be accessed
function getStyleSheetByTitle(sheetTitle)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		for(var i=0; i<ss.length; i++)
		{
			if(ss[i].title == sheetTitle) return document.styleSheets[i];
		}
		return null;	//not found
	}
	else	//Safari (it doesn't count stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length; i++)
		{
			//if(ss[i].disabled !== false)	//ss[i].disabled for an alternate stylesheet is initially false even though it's not enabled
			if(ss[i].href != document.styleSheets[iSafari].href)	//stylesheet not enabled
			{
				if(ss[i].title == sheetTitle) return null;	//Safari can't access this stylesheet
			}
			else
			{
				if(ss[i].title == sheetTitle) return document.styleSheets[iSafari];
				iSafari++;
			}
		}
		return null;	//not found
	}
}

//****************************************************************
//*************************** Rules ******************************
//****************************************************************

//browser bugs/incompatibilities galore; use at your own risk
//note: IE splits up selectors at the commas, so a single rule may be split into multiple rules
//note: .cssRules includes @import rules, but in IE they're in .imports instead
//sheet can be either an index or a stylesheet object
function getStyleSheetRules(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return null;
	return ss.cssRules || ss.rules;
}
//rules can be modified like this:
//var rules = getStyleSheetRules(0);	//get the rules in the first stylesheet
//rules[0].style.height = "25px";	//in the first rule, set the height

//add a rule to the end of a stylesheet
//note: IE's method (and consequently this function) puts the rule at the end of the stylesheet; you can't position it
// where you want
//sheet can be either an index or a stylesheet object
function appendStyleSheetRule(sheet, selector, properties)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.insertRule) ss.insertRule(selector+" { "+properties+" }", ss.cssRules.length);
	else ss.addRule(selector, properties);	//IE
	return true;
}

//sheet can be either an index or a stylesheet object
function deleteStyleSheetRule(sheet, ruleIndex)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.deleteRule) ss.deleteRule(ruleIndex);
	else ss.removeRule(ruleIndex);	//IE
	return true;
}

//****************************************************************
//************************** CSS Text ****************************
//****************************************************************

//to get the selector text of a rule: ruleObject.selectorText
//to get the properties text of a rule: ruleObject.style.cssText
//to get the properties text of an inline element: elem.style.cssText

//gets the full text of a rule (including selector)
function getRuleText(ruleObject)
{
	if(!ruleObject) return "";
	if(ruleObject.cssText) return ruleObject.cssText;
	return ruleObject.selectorText+" { "+ruleObject.style.cssText+" }";
}

//gets the full text of a stylesheet
//sheet can be either an index or a stylesheet object
function getStyleSheetText(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return "";
	if(ss.cssText) return ss.cssText;	//IE
	var txt = "";
	var rules = getStyleSheetRules(ss);
	for(var i=0; i<rules.length; i++)
	{
		txt += getRuleText(rules[i])+" ";
	}
	return txt;
}

Revision: 7216
at April 27, 2010 10:45 by wizard04


Updated Code
//****************************************************************
//*********************** Computed Style *************************
//****************************************************************

//IE doesn't support access to pseudoElement styles, so we won't use them at all (we'll pass null to
// window.getComputedStyle())

//get the computed styles of an element
function getStylesOf(elem)
{
	if(window.getComputedStyle) return window.getComputedStyle(elem, null);
	return elem.currentStyle;	//IE
}

//****************************************************************
//******************** Alternate Stylesheets *********************
//****************************************************************

//enables the stylesheet with the specified title; disables all other stylesheets that have a title
function setActiveStylesheet(toTitle)
{
	var sse = getStyleSheetElements();
	var ss = null;
	for(var i=0; i<sse.length; i++)
	{
		if(sse[i].title == toTitle)
		{
			ss = sse[i];
			break;
		}
	}
	if(!ss) return false;	//not found
	enableStyleSheet(ss);
	//disable all other stylesheets that have a title
	for(i=0; i<sse.length; i++)
	{
		if(sse[i] != ss && sse[i].title != "") disableStyleSheet(sse[i]);
	}
	return true;
}

//****************************************************************
//****************** Enable/Disable Stylesheet *******************
//****************************************************************

//sheet can be either an index or a stylesheet object
function disableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	ss.disabled = true;
}

//sheet can be either an index or a stylesheet object
function enableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	
	//note: in all but Firefox, the stylesheet must have been explicitly disabled before it can be enabled
	// (e.g., if it was an alternate stylesheet, it wasn't enabled to begin with but wasn't explicitly disabled either
	// for some reason)
	
	ss.disabled = true;	//in case it hasn't yet been explicitly disabled
	ss.disabled = false;
}

//****************************************************************
//*********************** Get Stylesheet *************************
//****************************************************************

//Safari doesn't count alternate stylesheets that aren't enabled, so we have to find them manually
//this function only returns the DOM elements; not the actual stylesheets
function getStyleSheetElements()
{
	var stylesheets = [];
	var elems = document.getElementsByTagName("head")[0].childNodes;
	for(var i=0; i<elems.length; i++)
	{
		if(elems[i].nodeType == 1)	//it's an element node
		{
			if(elems[i].tagName.toLowerCase() == "style" ||
			 (elems[i].tagName.toLowerCase() == "link" && /(^|\s)stylesheet(\s|$)/i.test(elems[i].rel)) )
			{
				stylesheets.push(elems[i]);
			}
		}
	}
	return stylesheets;
}

//get the stylesheet, or null if it doesn't exist or can't be accessed
function getStyleSheet(sheetIndex)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		if(sheetIndex < ss.length) return document.styleSheets[sheetIndex];
		return null;	//not found; sheetIndex is too large
	}
	else	//Safari (it doesn't count stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length && iSafari<document.styleSheets.length; i++)
		{
			//if(ss[i].disabled !== false)	//ss[i].disabled for an alternate stylesheet is initially false even though it's not enabled
			if(ss[i].href != document.styleSheets[iSafari].href)	//stylesheet not enabled
			{
				if(i == sheetIndex) return null;	//Safari can't access this stylesheet
			}
			else
			{
				if(i == sheetIndex) return document.styleSheets[iSafari];
				iSafari++;
			}
		}
		return null;	//not found; sheetIndex is too large
	}
}

//get the stylesheet with specified title, or null if it doesn't exist or can't be accessed
function getStyleSheetByTitle(sheetTitle)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		for(var i=0; i<ss.length; i++)
		{
			if(ss[i].title == sheetTitle) return document.styleSheets[i];
		}
		return null;	//not found
	}
	else	//Safari (it doesn't count stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length; i++)
		{
			//if(ss[i].disabled !== false)	//ss[i].disabled for an alternate stylesheet is initially false even though it's not enabled
			if(ss[i].href != document.styleSheets[iSafari].href)	//stylesheet not enabled
			{
				if(ss[i].title == sheetTitle) return null;	//Safari can't access this stylesheet
			}
			else
			{
				if(ss[i].title == sheetTitle) return document.styleSheets[iSafari];
				iSafari++;
			}
		}
		return null;	//not found
	}
}

//****************************************************************
//*************************** Rules ******************************
//****************************************************************

//browser bugs/incompatibilities galore; use at your own risk
//note: IE splits up selectors at the commas, so a single rule may be split into multiple rules
//note: .cssRules includes @import rules, but in IE they're in .imports instead
//sheet can be either an index or a stylesheet object
function getStyleSheetRules(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return null;
	return ss.cssRules || ss.rules;
}
//rules can be modified like this:
//var rules = getStyleSheetRules(0);	//get the rules in the first stylesheet
//rules[0].style.height = "25px";	//in the first rule, set the height

//add a rule to the end of a stylesheet
//note: IE's method (and consequently this function) puts the rule at the end of the stylesheet; you can't position it
// where you want
//sheet can be either an index or a stylesheet object
function appendStyleSheetRule(sheet, selector, properties)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.insertRule) ss.insertRule(selector+" { "+properties+" }", ss.cssRules.length);
	else ss.addRule(selector, properties);	//IE
	return true;
}

//sheet can be either an index or a stylesheet object
function deleteStyleSheetRule(sheet, ruleIndex)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.deleteRule) ss.deleteRule(ruleIndex);
	else ss.removeRule(ruleIndex);	//IE
	return true;
}

//****************************************************************
//************************** CSS Text ****************************
//****************************************************************

//to get the selector text of a rule: ruleObject.selectorText
//to get the properties text of a rule: ruleObject.style.cssText
//to get the properties text of an inline element: elem.style.cssText

//gets the full text of a rule (including selector)
function getRuleText(ruleObject)
{
	if(!ruleObject) return "";
	if(ruleObject.cssText) return ruleObject.cssText;
	return ruleObject.selectorText+" { "+ruleObject.style.cssText+" }";
}

//gets the full text of a stylesheet
//sheet can be either an index or a stylesheet object
function getStyleSheetText(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return "";
	if(ss.cssText) return ss.cssText;	//IE
	var txt = "";
	var rules = getStyleSheetRules(ss);
	for(var i=0; i<rules.length; i++)
	{
		txt += getRuleText(rules[i])+" ";
	}
	return txt;
}

Revision: 7215
at July 17, 2008 09:22 by wizard04


Updated Code
//****************************************************************
//*********************** Computed Style *************************
//****************************************************************

//IE doesn't support access to pseudoElement styles, so we won't use them at all (we'll pass null to
// window.getComputedStyle())

//get the computed styles of an element
function getStylesOf(elem)
{
	if(window.getComputedStyle) return window.getComputedStyle(elem, null);
	return elem.currentStyle;	//IE
}

//****************************************************************
//******************** Alternate Stylesheets *********************
//****************************************************************

//enables the stylesheet with the specified title; disables all other stylesheets that have a title
function setActiveStylesheet(toTitle)
{
	var sse = getStyleSheetElements();
	var ss = null;
	for(var i=0; i<sse.length; i++)
	{
		if(sse[i].title == toTitle)
		{
			ss = sse[i];
			break;
		}
	}
	if(!ss) return false;	//not found
	enableStyleSheet(ss);
	//disable all other stylesheets that have a title
	for(i=0; i<sse.length; i++)
	{
		if(sse[i] != ss && sse[i].title != "") disableStyleSheet(i);
	}
	return true;
}

//****************************************************************
//****************** Enable/Disable Stylesheet *******************
//****************************************************************

//sheet can be either an index or a stylesheet object
function disableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	ss.disabled = true;
}

//sheet can be either an index or a stylesheet object
function enableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	
	//note: in all but Firefox, the stylesheet must have been explicitly disabled before it can be enabled
	// (e.g., if it was an alternate stylesheet, it wasn't enabled to begin with but wasn't explicitly disabled either
	// for some reason)
	
	ss.disabled = true;	//in case it hasn't yet been explicitly disabled
	ss.disabled = false;
}

//****************************************************************
//*********************** Get Stylesheet *************************
//****************************************************************

//Safari doesn't count alternate stylesheets that aren't enabled, so we have to find them manually
//this function only returns the DOM elements; not the actual stylesheets
function getStyleSheetElements()
{
	var stylesheets = [];
	var elems = document.getElementsByTagName("head")[0].childNodes;
	for(var i=0; i<elems.length; i++)
	{
		if(elems[i].nodeType == 1)	//it's an element node
		{
			if(elems[i].tagName.toLowerCase() == "style" ||
			 (elems[i].tagName.toLowerCase() == "link" && /(^|\s)stylesheet(\s|$)/i.test(elems[i].rel)) )
			{
				stylesheets.push(elems[i]);
			}
		}
	}
	return stylesheets;
}

//get the stylesheet, or null if it doesn't exist or can't be accessed
function getStyleSheet(sheetIndex)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		if(sheetIndex < ss.length) return document.styleSheets[sheetIndex];
		return null;	//not found; sheetIndex is too large
	}
	else	//Safari (it doesn't count stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length && iSafari<document.styleSheets.length; i++)
		{
			//if(ss[i].disabled !== false)	//ss[i].disabled for an alternate stylesheet is initially false even though it's not enabled
			if(ss[i].href != document.styleSheets[iSafari].href)	//stylesheet not enabled
			{
				if(i == sheetIndex) return null;	//Safari can't access this stylesheet
			}
			else
			{
				if(i == sheetIndex) return document.styleSheets[iSafari];
				iSafari++;
			}
		}
		return null;	//not found; sheetIndex is too large
	}
}

//get the stylesheet with specified title, or null if it doesn't exist or can't be accessed
function getStyleSheetByTitle(sheetTitle)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		for(var i=0; i<ss.length; i++)
		{
			if(ss[i].title == sheetTitle) return document.styleSheets[i];
		}
		return null;	//not found
	}
	else	//Safari (it doesn't count stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length; i++)
		{
			//if(ss[i].disabled !== false)	//ss[i].disabled for an alternate stylesheet is initially false even though it's not enabled
			if(ss[i].href != document.styleSheets[iSafari].href)	//stylesheet not enabled
			{
				if(ss[i].title == sheetTitle) return null;	//Safari can't access this stylesheet
			}
			else
			{
				if(ss[i].title == sheetTitle) return document.styleSheets[iSafari];
				iSafari++;
			}
		}
		return null;	//not found
	}
}

//****************************************************************
//*************************** Rules ******************************
//****************************************************************

//browser bugs/incompatibilities galore; use at your own risk
//note: IE splits up selectors at the commas, so a single rule may be split into multiple rules
//note: .cssRules includes @import rules, but in IE they're in .imports instead
//sheet can be either an index or a stylesheet object
function getStyleSheetRules(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return null;
	return ss.cssRules || ss.rules;
}
//rules can be modified like this:
//var rules = getStyleSheetRules(0);	//get the rules in the first stylesheet
//rules[0].style.height = "25px";	//in the first rule, set the height

//add a rule to the end of a stylesheet
//note: IE's method (and consequently this function) puts the rule at the end of the stylesheet; you can't position it
// where you want
//sheet can be either an index or a stylesheet object
function appendStyleSheetRule(sheet, selector, properties)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.insertRule) ss.insertRule(selector+" { "+properties+" }", ss.cssRules.length);
	else ss.addRule(selector, properties);	//IE
	return true;
}

//sheet can be either an index or a stylesheet object
function deleteStyleSheetRule(sheet, ruleIndex)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.deleteRule) ss.deleteRule(ruleIndex);
	else ss.removeRule(ruleIndex);	//IE
	return true;
}

//****************************************************************
//************************** CSS Text ****************************
//****************************************************************

//to get the selector text of a rule: ruleObject.selectorText
//to get the properties text of a rule: ruleObject.style.cssText
//to get the properties text of an inline element: elem.style.cssText

//gets the full text of a rule (including selector)
function getRuleText(ruleObject)
{
	if(!ruleObject) return "";
	if(ruleObject.cssText) return ruleObject.cssText;
	return ruleObject.selectorText+" { "+ruleObject.style.cssText+" }";
}

//gets the full text of a stylesheet
//sheet can be either an index or a stylesheet object
function getStyleSheetText(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return "";
	if(ss.cssText) return ss.cssText;	//IE
	var txt = "";
	var rules = getStyleSheetRules(ss);
	for(var i=0; i<rules.length; i++)
	{
		txt += getRuleText(rules[i])+" ";
	}
	return txt;
}

Revision: 7214
at July 17, 2008 09:20 by wizard04


Updated Code
//****************************************************************
//*********************** Computed Style *************************
//****************************************************************

//IE doesn't support access to pseudoElement styles, so we won't use them at all (we'll pass null to
// window.getComputedStyle())

//get the computed styles of an element
function getStylesOf(elem)
{
	if(window.getComputedStyle) return window.getComputedStyle(elem, null);
	return elem.currentStyle;	//IE
}

//****************************************************************
//******************** Alternate Stylesheets *********************
//****************************************************************

//enables the stylesheet with the specified title; disables all other stylesheets that have a title
function setActiveStylesheet(toTitle)
{
	var sse = getStyleSheetElements();
	var ss = null;
	for(var i=0; i<sse.length; i++)
	{
		if(sse[i].title == toTitle)
		{
			ss = sse[i];
			break;
		}
	}
	if(!ss) return false;	//not found
	enableStyleSheet(ss);
	//disable all other stylesheets that have a title
	for(i=0; i<sse.length; i++)
	{
		if(sse[i] != ss && sse[i].title != "") disableStyleSheet(i);
	}
	return true;
}

//****************************************************************
//****************** Enable/Disable Stylesheet *******************
//****************************************************************

//sheet can be either an index or a stylesheet object
function disableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	ss.disabled = true;
}

//sheet can be either an index or a stylesheet object
function enableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	
	//note: in all but Firefox, the stylesheet must have been explicitly disabled before it can be enabled
	// (e.g., if it was an alternate stylesheet, it wasn't enabled to begin with but wasn't explicitly disabled either
	// for some reason)
	
	ss.disabled = true;	//in case it hasn't yet been explicitly disabled
	ss.disabled = false;
}

//****************************************************************
//*********************** Get Stylesheet *************************
//****************************************************************

//Safari doesn't count alternate stylesheets that aren't enabled, so we have to find them manually
//this function only returns the DOM elements; not the actual stylesheets
function getStyleSheetElements()
{
	var stylesheets = [];
	var elems = document.getElementsByTagName("head")[0].childNodes;
	for(var i=0; i<elems.length; i++)
	{
		if(elems[i].nodeType == 1)	//it's an element node
		{
			if(elems[i].tagName.toLowerCase() == "style" ||
			 (elems[i].tagName.toLowerCase() == "link" && /(^|\s)stylesheet(\s|$)/i.test(elems[i].rel)) )
			{
				stylesheets.push(elems[i]);
			}
		}
	}
	return stylesheets;
}

//get the stylesheet, or null if it doesn't exist or can't be accessed
function getStyleSheet(sheetIndex)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		if(sheetIndex < ss.length) return document.styleSheets[sheetIndex];
		return null;	//not found; sheetIndex is too large
	}
	else	//Safari (it doesn't count stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length && iSafari<document.styleSheets.length; i++)
		{
			//if(ss[i].disabled !== false)	//ss[i].disabled is initially false even though it's not enabled
			if(ss[i].href != document.styleSheets[iSafari].href)	//stylesheet not enabled
			{
				if(i == sheetIndex) return null;	//Safari can't access this stylesheet
			}
			else
			{
				if(i == sheetIndex) return document.styleSheets[iSafari];
				iSafari++;
			}
		}
		return null;	//not found; sheetIndex is too large
	}
}

//get the stylesheet with specified title, or null if it doesn't exist or can't be accessed
function getStyleSheetByTitle(sheetTitle)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		for(var i=0; i<ss.length; i++)
		{
			if(ss[i].title == sheetTitle) return document.styleSheets[i];
		}
		return null;	//not found
	}
	else	//Safari (it doesn't count stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length; i++)
		{
			if(ss[i].href != document.styleSheets[iSafari].href)	//stylesheet not enabled
			{
				if(ss[i].title == sheetTitle) return null;	//Safari can't access this stylesheet
			}
			else
			{
				if(ss[i].title == sheetTitle) return document.styleSheets[iSafari];
				iSafari++;
			}
		}
		return null;	//not found
	}
}

//****************************************************************
//*************************** Rules ******************************
//****************************************************************

//browser bugs/incompatibilities galore; use at your own risk
//note: IE splits up selectors at the commas, so a single rule may be split into multiple rules
//note: .cssRules includes @import rules, but in IE they're in .imports instead
//sheet can be either an index or a stylesheet object
function getStyleSheetRules(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return null;
	return ss.cssRules || ss.rules;
}
//rules can be modified like this:
//var rules = getStyleSheetRules(0);	//get the rules in the first stylesheet
//rules[0].style.height = "25px";	//in the first rule, set the height

//add a rule to the end of a stylesheet
//note: IE's method (and consequently this function) puts the rule at the end of the stylesheet; you can't position it
// where you want
//sheet can be either an index or a stylesheet object
function appendStyleSheetRule(sheet, selector, properties)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.insertRule) ss.insertRule(selector+" { "+properties+" }", ss.cssRules.length);
	else ss.addRule(selector, properties);	//IE
	return true;
}

//sheet can be either an index or a stylesheet object
function deleteStyleSheetRule(sheet, ruleIndex)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.deleteRule) ss.deleteRule(ruleIndex);
	else ss.removeRule(ruleIndex);	//IE
	return true;
}

//****************************************************************
//************************** CSS Text ****************************
//****************************************************************

//to get the selector text of a rule: ruleObject.selectorText
//to get the properties text of a rule: ruleObject.style.cssText
//to get the properties text of an inline element: elem.style.cssText

//gets the full text of a rule (including selector)
function getRuleText(ruleObject)
{
	if(!ruleObject) return "";
	if(ruleObject.cssText) return ruleObject.cssText;
	return ruleObject.selectorText+" { "+ruleObject.style.cssText+" }";
}

//gets the full text of a stylesheet
//sheet can be either an index or a stylesheet object
function getStyleSheetText(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return "";
	if(ss.cssText) return ss.cssText;	//IE
	var txt = "";
	var rules = getStyleSheetRules(ss);
	for(var i=0; i<rules.length; i++)
	{
		txt += getRuleText(rules[i])+" ";
	}
	return txt;
}

Revision: 7213
at July 15, 2008 13:52 by wizard04


Updated Code
//****************************************************************
//*********************** Computed Style *************************
//****************************************************************

//IE doesn't support access to pseudoElement styles, so we won't use them at all (we'll pass null to
// window.getComputedStyle())

//get the computed styles of an element
function getStylesOf(elem)
{
	if(window.getComputedStyle) return window.getComputedStyle(elem, null);
	return elem.currentStyle;	//IE
}

//****************************************************************
//******************** Alternate Stylesheets *********************
//****************************************************************

//enables the stylesheet with the specified title; disables all other stylesheets that have a title
function setActiveStylesheet(toTitle)
{
	var sse = getStyleSheetElements();
	var ss = null;
	for(var i=0; i<sse.length; i++)
	{
		if(sse[i].title == toTitle)
		{
			ss = sse[i];
			break;
		}
	}
	if(!ss) return false;	//not found
	enableStyleSheet(ss);
	//disable all other stylesheets that have a title
	for(i=0; i<sse.length; i++)
	{
		if(sse[i] != ss && sse[i].title != "") disableStyleSheet(i);
	}
	return true;
}

//****************************************************************
//****************** Enable/Disable Stylesheet *******************
//****************************************************************

//sheet can be either an index or a stylesheet object
function disableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	ss.disabled = true;
}

//sheet can be either an index or a stylesheet object
function enableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	
	//note: in all but Firefox, the stylesheet must have been explicitly disabled before it can be enabled
	// (e.g., if it was an alternate stylesheet, it wasn't enabled to begin with but wasn't explicitly disabled either
	// for some reason)
	
	ss.disabled = true;	//in case it hasn't yet been explicitly disabled
	ss.disabled = false;
}

//****************************************************************
//*********************** Get Stylesheet *************************
//****************************************************************

//Safari doesn't count alternate stylesheets that aren't enabled, so we have to find them manually
//this function only returns the DOM elements; not the actual stylesheets
function getStyleSheetElements()
{
	var stylesheets = [];
	var elems = document.getElementsByTagName("head")[0].childNodes;
	for(var i=0; i<elems.length; i++)
	{
		if(elems[i].nodeType == 1)	//it's an element node
		{
			if(elems[i].tagName.toLowerCase() == "style" ||
			 (elems[i].tagName.toLowerCase() == "link" && /(^|\s)stylesheet(\s|$)/i.test(elems[i].rel)) )
			{
				stylesheets.push(elems[i]);
			}
		}
	}
	return stylesheets;
}

//get the stylesheet, or null if it doesn't exist or can't be accessed
function getStyleSheet(sheetIndex)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		if(sheetIndex < ss.length) return document.styleSheets[sheetIndex];
		return null;	//sheetIndex is too large
	}
	else	//Safari (it doesn't count alternate stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length && iSafari<document.styleSheets.length; i++)
		{
			if(/(^|\s)alternate(\s|$)/i.test(ss[i].rel) &&
			 //ss[i].disabled !== false)	//ss[i].disabled is initially false even though it's not enabled
			 ss[i].href != document.styleSheets[iSafari].href)	//alternate stylesheet, not enabled
			{
				if(i == sheetIndex) return null;	//Safari can't access this stylesheet
			}
			else
			{
				if(i == sheetIndex) return document.styleSheets[iSafari];
				iSafari++;
			}
		}
		return null;	//sheetIndex is too large
	}
}

//get the stylesheet with specified title, or null if it doesn't exist or can't be accessed
function getStyleSheetByTitle(sheetTitle)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		for(var i=0; i<ss.length; i++)
		{
			if(ss[i].title == sheetTitle) return document.styleSheets[i];
		}
		return null;	//not found
	}
	else	//Safari (it doesn't count alternate stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length; i++)
		{
			if(/(^|\s)alternate(\s|$)/i.test(ss[i].rel) && ss[i].disabled != false)	//alternate, not enabled
			{
				if(ss[i].title == sheetTitle) return null;	//Safari can't access this stylesheet
			}
			else
			{
				iSafari++;
				if(ss[i].title == sheetTitle) return document.styleSheets[iSafari];
			}
		}
		return null;	//not found
	}
}

//****************************************************************
//*************************** Rules ******************************
//****************************************************************

//browser bugs galore; use at your own risk
//note: IE splits up selectors at the commas, so a single rule may be split into multiple rules
//note: .cssRules includes @import rules, but in IE they're in .imports instead
//sheet can be either an index or a stylesheet object
function getStyleSheetRules(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return null;
	return ss.cssRules || ss.rules;
}
//rules can be modified like this:
//var rules = getStyleSheetRules(0);	//get the rules in the first stylesheet
//rules[0].style.height = "25px";	//in the first rule, set the height

//add a rule to the end of a stylesheet
//note: IE's method (and consequently this function) puts the rule at the end of the stylesheet; you can't position it
// where you want
//sheet can be either an index or a stylesheet object
function appendStyleSheetRule(sheet, selector, properties)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.insertRule) ss.insertRule(selector+" { "+properties+" }", ss.cssRules.length);
	else ss.addRule(selector, properties);	//IE
	return true;
}

//sheet can be either an index or a stylesheet object
function deleteStyleSheetRule(sheet, ruleIndex)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.deleteRule) ss.deleteRule(ruleIndex);
	else ss.removeRule(ruleIndex);	//IE
	return true;
}

//****************************************************************
//************************** CSS Text ****************************
//****************************************************************

//to get the selector text of a rule: ruleObject.selectorText
//to get the properties text of a rule: ruleObject.style.cssText
//to get the properties text of an inline element: elem.style.cssText

//gets the full text of a rule (including selector)
function getRuleText(ruleObject)
{
	if(!ruleObject) return "";
	if(ruleObject.cssText) return ruleObject.cssText;
	return ruleObject.selectorText+" { "+ruleObject.style.cssText+" }";
}

//gets the full text of a stylesheet
//sheet can be either an index or a stylesheet object
function getStyleSheetText(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return "";
	if(ss.cssText) return ss.cssText;	//IE
	var txt = "";
	var rules = getStyleSheetRules(ss);
	for(var i=0; i<rules.length; i++)
	{
		txt += getRuleText(rules[i])+" ";
	}
	return txt;
}

Revision: 7212
at July 15, 2008 13:44 by wizard04


Updated Code
//****************************************************************
//*********************** Computed Style *************************
//****************************************************************

//IE doesn't support access to pseudoElement styles, so we won't use them at all (we'll pass null to
// window.getComputedStyle())

//get the computed styles of an element
function getStylesOf(elem)
{
	if(window.getComputedStyle) return window.getComputedStyle(elem, null);
	return elem.currentStyle;	//IE
}

//****************************************************************
//******************** Alternate Stylesheets *********************
//****************************************************************

//enables the stylesheet with the specified title; disables all other stylesheets that have a title
function setActiveStylesheet(toTitle)
{
	var sse = getStyleSheetElements();
	var ss = null;
	for(var i=0; i<sse.length; i++)
	{
		if(sse[i].title == toTitle)
		{
			ss = sse[i];
			break;
		}
	}
	if(!ss) return false;	//not found
	enableStyleSheet(ss);
	//disable all other stylesheets that have a title
	for(i=0; i<sse.length; i++)
	{
		if(sse[i] != ss && sse[i].title != "") disableStyleSheet(i);
	}
	return true;
}

//****************************************************************
//****************** Enable/Disable Stylesheet *******************
//****************************************************************

//sheet can be either an index or a stylesheet object
function disableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	ss.disabled = true;
}

//sheet can be either an index or a stylesheet object
function enableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	
	//note: in all but Firefox, the stylesheet must have been explicitly disabled before it can be enabled
	// (e.g., if it was an alternate stylesheet, it wasn't enabled to begin with but wasn't explicitly disabled either
	// for some reason)
	
	ss.disabled = true;	//in case it hasn't yet been explicitly disabled
	ss.disabled = false;
}

//****************************************************************
//*********************** Get Stylesheet *************************
//****************************************************************

//Safari doesn't count alternate stylesheets that aren't enabled, so we have to find them manually
//this function only returns the DOM elements; not the actual stylesheets
function getStyleSheetElements()
{
	var stylesheets = [];
	var elems = document.getElementsByTagName("head")[0].childNodes;
	for(var i=0; i<elems.length; i++)
	{
		if(elems[i].nodeType == 1)	//it's an element node
		{
			if(elems[i].tagName.toLowerCase() == "style" ||
			 (elems[i].tagName.toLowerCase() == "link" && /(^|\s)stylesheet(\s|$)/i.test(elems[i].rel)) )
			{
				stylesheets.push(elems[i]);
			}
		}
	}
	return stylesheets;
}

//get the stylesheet, or null if it doesn't exist or can't be accessed
function getStyleSheet(sheetIndex)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		if(sheetIndex < ss.length) return document.styleSheets[sheetIndex];
		return null;	//sheetIndex is too large
	}
	else	//Safari (it doesn't count alternate stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length && iSafari<document.styleSheets.length; i++)
		{
			if(/(^|\s)alternate(\s|$)/i.test(ss[i].rel) &&
			 //ss[i].disabled !== false)	//ss[i].disabled is initially false even though it's not enabled
			 ss[i].href != document.styleSheets[iSafari].href)	//alternate stylesheet, not enabled
			{
				if(i == sheetIndex) return null;	//Safari can't access this stylesheet
			}
			else
			{
				if(i == sheetIndex) return document.styleSheets[iSafari];
				iSafari++;
			}
		}
		return null;	//sheetIndex is too large
	}
}

//get the stylesheet with specified title, or null if it doesn't exist or can't be accessed
function getStyleSheetByTitle(sheetTitle)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		for(var i=0; i<ss.length; i++)
		{
			if(ss[i].title == sheetTitle) return document.styleSheets[i];
		}
		return null;	//not found
	}
	else	//Safari (it doesn't count alternate stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length; i++)
		{
			if(/(^|\s)alternate(\s|$)/i.test(ss[i].rel) && ss[i].disabled != false)	//alternate, not enabled
			{
				if(ss[i].title == sheetTitle) return null;	//Safari can't access this stylesheet
			}
			else
			{
				iSafari++;
				if(ss[i].title == sheetTitle) return document.styleSheets[iSafari];
			}
		}
		return null;	//not found
	}
}

//****************************************************************
//*************************** Rules ******************************
//****************************************************************

//browser bugs galore; use at your own risk
//note: IE splits up selectors at the commas, so a single rule may be split into multiple rules
//note: .cssRules includes @import rules, but in IE they're in .imports instead
//sheet can be either an index or a stylesheet object
function getStyleSheetRules(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return null;
	return ss.cssRules || ss.rules;
}
//rules can be modified like this:
//var rules = getStyleSheetRules(0);	//get the rules in the first stylesheet
//rules[0].style.height = "25px";	//in the first rule, set the height

//add a rule to the end of a stylesheet
//note: IE's method (and consequently this function) puts the rule at the end of the stylesheet; you can't position it
// where you want
//sheet can be either an index or a stylesheet object
function appendStyleSheetRule(sheet, selector, properties)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.insertRule) ss.insertRule(selector+"{"+properties+"}", ss.cssRules.length);
	else ss.addRule(selector, properties);	//IE
	return true;
}

//sheet can be either an index or a stylesheet object
function deleteStyleSheetRule(sheet, ruleIndex)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.deleteRule) ss.deleteRule(ruleIndex);
	else ss.removeRule(ruleIndex);	//IE
	return true;
}

//****************************************************************
//************************** CSS Text ****************************
//****************************************************************

//to get the selector text of a rule: ruleObject.selectorText
//to get the properties text of a rule: ruleObject.style.cssText
//to get the properties text of an inline element: elem.style.cssText

//gets the full text of a rule (including selector)
function getRuleText(ruleObject)
{
	if(!ruleObject) return "";
	if(ruleObject.cssText) return ruleObject.cssText;
	return ruleObject.selectorText+" { "+ruleObject.style.cssText+" }";
}

//gets the full text of a stylesheet
//sheet can be either an index or a stylesheet object
function getStyleSheetText(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return "";
	if(ss.cssText) return ss.cssText;	//IE
	var txt = "";
	var rules = getStyleSheetRules(ss);
	for(var i=0; i<rules.length; i++)
	{
		txt += getRuleText(rules[i])+" ";
	}
	return txt;
}

Revision: 7211
at July 15, 2008 13:15 by wizard04


Updated Code
//****************************************************************
//*********************** Computed Style *************************
//****************************************************************

//IE doesn't support access to pseudoElement styles, so we won't use them at all (we'll pass null to
// window.getComputedStyle())

//get the computed styles of an element
function getStylesOf(elem)
{
	if(window.getComputedStyle) return window.getComputedStyle(elem, null);
	return elem.currentStyle;	//IE
}

//****************************************************************
//******************** Alternate Stylesheets *********************
//****************************************************************

//enables the stylesheet with the specified title; disables all other stylesheets that have a title
function setActiveStylesheet(toTitle)
{
	var ss = getStyleSheetElementByTitle(toTitle);
	if(!ss) return false;	//not found
	enableStyleSheet(ss);
	//disable all other stylesheets that have a title
	var sse = getStyleSheetElements();
	for(var i=0; i<sse.length; i++)
	{
		if(sse[i] != ss && sse[i].title != "") disableStyleSheet(i);
	}
	return true;
}

//****************************************************************
//****************** Enable/Disable Stylesheet *******************
//****************************************************************

//sheet can be either an index or a stylesheet object
function disableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	ss.disabled = true;
}

//sheet can be either an index or a stylesheet object
function enableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	
	//note: in all but Firefox, the stylesheet must have been explicitly disabled before it can be enabled
	// (e.g., if it was an alternate stylesheet, it wasn't enabled to begin with but wasn't explicitly disabled either
	// for some reason)
	
	ss.disabled = true;	//in case it hasn't yet been explicitly disabled
	ss.disabled = false;
}

//****************************************************************
//*********************** Get Stylesheet *************************
//****************************************************************

//Safari doesn't count alternate stylesheets that aren't enabled, so we have to find them manually
//this function only returns the DOM elements; not the actual stylesheets
function getStyleSheetElements()
{
	var stylesheets = [];
	var elems = document.getElementsByTagName("head")[0].childNodes;
	for(var i=0; i<elems.length; i++)
	{
		if(elems[i].nodeType == 1)	//it's an element node
		{
			if(elems[i].tagName.toLowerCase() == "style" ||
			 (elems[i].tagName.toLowerCase() == "link" && /(^|\s)stylesheet(\s|$)/i.test(elems[i].rel)) )
			{
				stylesheets.push(elems[i]);
			}
		}
	}
	return stylesheets;
}

//get the stylesheet, or null if it doesn't exist or can't be accessed
function getStyleSheet(sheetIndex)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		if(sheetIndex < ss.length) return document.styleSheets[sheetIndex];
		return null;	//sheetIndex is too large
	}
	else	//Safari (it doesn't count alternate stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length && iSafari<document.styleSheets.length; i++)
		{
			if(/(^|\s)alternate(\s|$)/i.test(ss[i].rel) &&
			 //ss[i].disabled !== false)	//ss[i].disabled is initially false even though it's not enabled
			 ss[i].href != document.styleSheets[iSafari].href)	//alternate stylesheet, not enabled
			{
				if(i == sheetIndex) return null;	//Safari can't access this stylesheet
			}
			else
			{
				if(i == sheetIndex) return document.styleSheets[iSafari];
				iSafari++;
			}
		}
		return null;	//sheetIndex is too large
	}
}

//get the stylesheet with specified title, or null if it doesn't exist or can't be accessed
function getStyleSheetByTitle(sheetTitle)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		for(var i=0; i<ss.length; i++)
		{
			if(ss[i].title == sheetTitle) return document.styleSheets[i];
		}
		return null;	//not found
	}
	else	//Safari (it doesn't count alternate stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length; i++)
		{
			if(/(^|\s)alternate(\s|$)/i.test(ss[i].rel) && ss[i].disabled != false)	//alternate, not enabled
			{
				if(ss[i].title == sheetTitle) return null;	//Safari can't access this stylesheet
			}
			else
			{
				iSafari++;
				if(ss[i].title == sheetTitle) return document.styleSheets[iSafari];
			}
		}
		return null;	//not found
	}
}

//****************************************************************
//*************************** Rules ******************************
//****************************************************************

//browser bugs galore; use at your own risk
//note: IE splits up selectors at the commas, so a single rule may be split into multiple rules
//note: .cssRules includes @import rules, but in IE they're in .imports instead
//sheet can be either an index or a stylesheet object
function getStyleSheetRules(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return null;
	return ss.cssRules || ss.rules;
}
//rules can be modified like this:
//var rules = getStyleSheetRules(0);	//get the rules in the first stylesheet
//rules[0].style.height = "25px";	//in the first rule, set the height

//add a rule to the end of a stylesheet
//note: IE's method (and consequently this function) puts the rule at the end of the stylesheet; you can't position it
// where you want
//sheet can be either an index or a stylesheet object
function appendStyleSheetRule(sheet, selector, properties)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.insertRule) ss.insertRule(selector+"{"+properties+"}", ss.cssRules.length);
	else ss.addRule(selector, properties);	//IE
	return true;
}

//sheet can be either an index or a stylesheet object
function deleteStyleSheetRule(sheet, ruleIndex)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.deleteRule) ss.deleteRule(ruleIndex);
	else ss.removeRule(ruleIndex);	//IE
	return true;
}

//****************************************************************
//************************** CSS Text ****************************
//****************************************************************

//to get the selector text of a rule: ruleObject.selectorText
//to get the properties text of a rule: ruleObject.style.cssText
//to get the properties text of an inline element: elem.style.cssText

//gets the full text of a rule (including selector)
function getRuleText(ruleObject)
{
	if(!ruleObject) return "";
	if(ruleObject.cssText) return ruleObject.cssText;
	return ruleObject.selectorText+" { "+ruleObject.style.cssText+" }";
}

//gets the full text of a stylesheet
//sheet can be either an index or a stylesheet object
function getStyleSheetText(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return "";
	if(ss.cssText) return ss.cssText;	//IE
	var txt = "";
	var rules = getStyleSheetRules(ss);
	for(var i=0; i<rules.length; i++)
	{
		txt += getRuleText(rules[i])+" ";
	}
	return txt;
}

Revision: 7210
at July 15, 2008 13:11 by wizard04


Updated Code
//****************************************************************
//*********************** Computed Style *************************
//****************************************************************

//IE doesn't support access to pseudoElement styles, so we won't use them at all (we'll pass null to
// window.getComputedStyle())

//get the computed styles of an element
function getStylesOf(elem)
{
	if(window.getComputedStyle) return window.getComputedStyle(elem, null);
	return elem.currentStyle;	//IE
}

//****************************************************************
//******************** Alternate Stylesheets *********************
//****************************************************************

//enables the stylesheet with the specified title; disables all other stylesheets that have a title
function setActiveStylesheet(toTitle)
{
	var ss = getStyleSheetElementByTitle(toTitle);
	if(!ss) return false;	//not found
	enableStyleSheet(ss);
	//disable all other stylesheets that have a title
	var sse = getStyleSheetElements();
	for(var i=0; i<sse.length; i++)
	{
		if(sse[i] != ss && sse[i].title != "") disableStyleSheet(i);
	}
	return true;
}

//****************************************************************
//****************** Enable/Disable Stylesheet *******************
//****************************************************************

function disableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	ss.disabled = true;
}

function enableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheetElements()[sheet];	//sheet is an index
	
	//note: in all but Firefox, the stylesheet must have been explicitly disabled before it can be enabled
	// (e.g., if it was an alternate stylesheet, it wasn't enabled to begin with but wasn't explicitly disabled either
	// for some reason)
	
	ss.disabled = true;	//in case it hasn't yet been explicitly disabled
	ss.disabled = false;
}

//****************************************************************
//*********************** Get Stylesheet *************************
//****************************************************************

//Safari doesn't count alternate stylesheets that aren't enabled, so we have to find them manually
//this function only returns the DOM elements; not the actual stylesheets
function getStyleSheetElements()
{
	var stylesheets = [];
	var elems = document.getElementsByTagName("head")[0].childNodes;
	for(var i=0; i<elems.length; i++)
	{
		if(elems[i].nodeType == 1)	//it's an element node
		{
			if(elems[i].tagName.toLowerCase() == "style" ||
			 (elems[i].tagName.toLowerCase() == "link" && /(^|\s)stylesheet(\s|$)/i.test(elems[i].rel)) )
			{
				stylesheets.push(elems[i]);
			}
		}
	}
	return stylesheets;
}

//get the stylesheet, or null if it doesn't exist or can't be accessed
function getStyleSheet(sheetIndex)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		if(sheetIndex < ss.length) return document.styleSheets[sheetIndex];
		return null;	//sheetIndex is too large
	}
	else	//Safari (it doesn't count alternate stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length && iSafari<document.styleSheets.length; i++)
		{
			if(/(^|\s)alternate(\s|$)/i.test(ss[i].rel) &&
			 //ss[i].disabled !== false)	//ss[i].disabled is initially false even though it's not enabled
			 ss[i].href != document.styleSheets[iSafari].href)	//alternate stylesheet, not enabled
			{
				if(i == sheetIndex) return null;	//Safari can't access this stylesheet
			}
			else
			{
				if(i == sheetIndex) return document.styleSheets[iSafari];
				iSafari++;
			}
		}
		return null;	//sheetIndex is too large
	}
}

//get the stylesheet with specified title, or null if it doesn't exist or can't be accessed
function getStyleSheetByTitle(sheetTitle)
{
	var ss = getStyleSheetElements();
	if(ss.length == document.styleSheets.length)
	{
		for(var i=0; i<ss.length; i++)
		{
			if(ss[i].title == sheetTitle) return document.styleSheets[i];
		}
		return null;	//not found
	}
	else	//Safari (it doesn't count alternate stylesheets that aren't enabled)
	{
		var iSafari = 0;
		for(var i=0; i<ss.length; i++)
		{
			if(/(^|\s)alternate(\s|$)/i.test(ss[i].rel) && ss[i].disabled != false)	//alternate, not enabled
			{
				if(ss[i].title == sheetTitle) return null;	//Safari can't access this stylesheet
			}
			else
			{
				iSafari++;
				if(ss[i].title == sheetTitle) return document.styleSheets[iSafari];
			}
		}
		return null;	//not found
	}
}

//****************************************************************
//*************************** Rules ******************************
//****************************************************************

//browser bugs galore; use at your own risk
//note: IE splits up selectors at the commas, so a single rule may be split into multiple rules
//note: .cssRules includes @import rules, but in IE they're in .imports instead
function getStyleSheetRules(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return null;
	return ss.cssRules || ss.rules;
}
//rules can be modified like this:
//var rules = getStyleSheetRules(0);	//get the rules in the first stylesheet
//rules[0].style.height = "25px";	//in the first rule, set the height

//add a rule to the end of a stylesheet
//note: IE's method (and consequently this function) puts the rule at the end of the stylesheet; you can't position it
// where you want
function appendStyleSheetRule(sheet, selector, properties)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.insertRule) ss.insertRule(selector+"{"+properties+"}", ss.cssRules.length);
	else ss.addRule(selector, properties);	//IE
	return true;
}

function deleteStyleSheetRule(sheet, ruleIndex)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return false;
	if(ss.deleteRule) ss.deleteRule(ruleIndex);
	else ss.removeRule(ruleIndex);	//IE
	return true;
}

//****************************************************************
//************************** CSS Text ****************************
//****************************************************************

//to get the selector text of a rule: ruleObject.selectorText
//to get the styles text of a rule: ruleObject.style.cssText
//to get the styles text of an inline element: elem.style.cssText

//gets the full text of a rule (including selector)
function getRuleText(rule)
{
	if(!rule) return "";
	if(rule.cssText) return rule.cssText;
	return rule.selectorText+" { "+rule.style.cssText+" }";
}

//gets the full text of a stylesheet
function getStyleSheetText(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = getStyleSheet(sheet);	//sheet is an index
	if(!ss) return "";
	if(ss.cssText) return ss.cssText;	//IE
	var txt = "";
	var rules = getStyleSheetRules(ss);
	for(var i=0; i<rules.length; i++)
	{
		txt += getRuleText(rules[i])+" ";
	}
	return txt;
}

Revision: 7209
at July 15, 2008 08:59 by wizard04


Updated Code
//****************************************************************
//*********************** Computed Style *************************
//****************************************************************

//IE doesn't support access to pseudoElement styles. Since we want to make the behavior consistent in all
// browsers, we won't use them at all (we'll pass null to window.getComputedStyle())

//get the computed styles of an element (or null)
function getStylesOf(elem)
{
	if(window.getComputedStyle)
	{
		return window.getComputedStyle(elem, null);
	}
	else	//IE
	{
		return elem.currentStyle;
	}
}

//****************************************************************
//******************* Stylesheet Manipulation ********************
//****************************************************************

//because of browser incompatibilities, the only acceptable way to access a stylesheet (or a rule) is by using
// its numerical position in the document

//********** Enable/Disable Stylesheets **********

function disableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = document.styleSheets[sheet];	//sheet is an index
	ss.disabled = true;
}

function enableStyleSheet(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = document.styleSheets[sheet];	//sheet is an index
	
	//note: in all but Firefox, the stylesheet must have been explicitly disabled before it can be enabled
	// (e.g., if it was an alternate stylesheet, it wasn't enabled to begin with but wasn't explicitly disabled either)
	
	ss.disabled = true;	//in case it hasn't yet been explicitly disabled
	ss.disabled = false;
}

//********** Stylesheet Rules **********

//note: IE splits up selectors at the commas, so a single rule may be split into multiple rules
//note: .cssRules includes @import rules, but in IE they're in .imports instead
function getStyleSheetRules(sheet)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = document.styleSheets[sheet];	//sheet is an index
	
	return ss.cssRules || ss.rules;
}
//rules can be modified like this:
//var rules = getStyleSheetRules(0);	//get the rules in the first stylesheet
//rules[0].style.height = "25px";	//in the first rule, set the height

//add a rule to the end of a stylesheet
//note: IE's method (and consequently this function) puts the rule at the end of the stylesheet; you can't position it
// where you want
function appendStyleSheetRule(sheet, selector, properties)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = document.styleSheets[sheet];	//sheet is an index
	
	if(ss.insertRule) ss.insertRule(selector+"{"+properties+"}", ss.cssRules.length);
	else ss.addRule(selector, properties);	//IE
}

function deleteStyleSheetRule(sheet, ruleIndex)
{
	if(sheet instanceof Object) var ss = sheet;	//sheet is an object
	else var ss = document.styleSheets[sheet];	//sheet is an index
	
	if(ss.deleteRule) ss.deleteRule(ruleIndex);
	else ss.removeRule(ruleIndex);	//IE
}

//********** Rule Properties **********

//to get the selector text: ruleObject.selectorText
//to get the styles object: ruleObject.style
//to get the styles text: ruleObject.style.cssText (or elem.style.cssText for inline styles)

//****************************************************************
//******************** Alternate Stylesheets *********************
//****************************************************************

function setActiveStylesheet(toTitle)
{
	var links = document.getElementsByTagName("link");
	var rel, title;
	var activeFound = false;
	for(var i=0; i<links.length; i++)	//for each link element
	{
		rel = getAttrValue(links[i], "rel");
		title = getAttrValue(links[i], "title");
		if(title && rel.search(/(^|\s)stylesheet(\s|$)/i)+1)	//if it's a stylesheet with a title
		{
			//note: in all but Firefox, the stylesheet must have been explicitly disabled before it can be enabled
			// (e.g., if it was an alternate stylesheet, it wasn't enabled to begin with but wasn't explicitly disabled
			// either)
			links[i].disabled = true;	//in case it hasn't yet been explicitly disabled
			if(title == toTitle)
			{
				activeFound = true;
				links[i].disabled = false;	//set this to be the active stylesheet
			}
		}
	}
	if(!activeFound)	//the specified stylesheet was not found, so use the preferred stylesheet
	{
		for(i=0; i<links.length; i++)	//for each link element
		{
			rel = getAttrValue(links[i], "rel");
			title = getAttrValue(links[i], "title");
			//if it's a preferred stylesheet
			if(title && rel.search(/(^|\s)stylesheet(\s|$)/i)+1 && rel.search(/(^|\s)alternate(\s|$)/i) == -1)
			{
				links[i].disabled = false;
			}
		}
		return false;
	}
	return true;
}

Revision: 7208
at July 14, 2008 16:49 by wizard04


Initial Code
//****************************************************************
//*********************** Computed Style *************************
//****************************************************************

//IE doesn't support access to pseudoElement styles. Since we want to make the behavior consistent in all
// browsers, we won't use them at all (we'll pass null to window.getComputedStyle())

//get the computed styles of an element (or null)
function getStylesOf(elem)
{
	if(window.getComputedStyle)
	{
		return window.getComputedStyle(elem, null);
	}
	else if(elem.currentStyle)	//IE
	{
		return elem.currentStyle;
	}
	else return null;	//can't get the computed styles
}

//get a computed style property of an element (or null)
function getStyle(elem, styleProperty)
{
	var s = getStylesOf(elem);
	if(s) return s[styleProperty];
	return null;	//can't get the computed style
}

//****************************************************************
//******************* Stylesheet Manipulation ********************
//****************************************************************

//because of browser incompatibilities, the only acceptable way to access a stylesheet (or a rule) is by using
// its numerical position in the document

//note: IE splits up selectors at the commas, so a single rule may be split into multiple rules
//note: .cssRules (W3C) includes @import rules, but .rules (IE) does not (they are in .imports (IE) instead)
function getStyleSheetRules(sheetIndex)
{
	var ss = document.styleSheets[sheetIndex];
	return ss.cssRules || ss.rules;
}

//rules can be modified like this:
//var rules = getStyleSheetRules(0);	//get the rules in the first stylesheet
//rules[0].style.height = "25px";	//in the first rule, set the height

//add a rule to the end of a stylesheet
//note: IE's method (and hence this function) puts the rule at the end of the stylesheet; you can't position it where you
// want
function addStyleRule(sheetIndex, selector, properties)
{
	var ss = document.styleSheets[sheetIndex];
	if(ss.insertRule) ss.insertRule(selector+"{"+properties+"}", ss.cssRules.length);
	else ss.addRule(selector, properties);	//IE
}

function deleteStyleRule(sheetIndex, ruleIndex)
{
	var ss = document.styleSheets[sheetIndex];
	if(ss.deleteRule) ss.deleteRule(ruleIndex);
	else ss.removeRule(ruleIndex);	//IE
}

//****************************************************************
//******************** Alternate Stylesheets *********************
//****************************************************************

function setActiveStylesheet(toTitle)
{
	var links = document.getElementsByTagName("link");
	var rel, title;
	var activeFound = false;
	for(var i=0; i<links.length; i++)	//for each link element
	{
		rel = getAttrValue(links[i], "rel");
		title = getAttrValue(links[i], "title");
		if(title && rel.search(/(^|\s)stylesheet(\s|$)/i)+1)	//if it's a stylesheet with a title
		{
			//note: in all but Firefox, the link must be disabled before it can be enabled
			links[i].disabled = true;
			if(title == toTitle)
			{
				activeFound = true;
				links[i].disabled = false;	//set this to be the active stylesheet
			}
		}
	}
	if(!activeFound)	//the specified stylesheet was not found, so use the preferred stylesheet
	{
		for(i=0; i<links.length; i++)	//for each link element
		{
			rel = getAttrValue(links[i], "rel");
			title = getAttrValue(links[i], "title");
			//if it's a preferred stylesheet
			if(title && rel.search(/(^|\s)stylesheet(\s|$)/i)+1 && rel.search(/(^|\s)alternate(\s|$)/i) == -1)
			{
				links[i].disabled = false;
			}
		}
		return false;
	}
	return true;
}

Initial URL

                                

Initial Description
Useful functions to get around browser incompatibilities when working with stylesheets.  
If you find any errors, please leave a comment.

Initial Title
Styles and Stylesheet Manipulation

Initial Tags
javascript, style

Initial Language
JavaScript