Posted By

wizard04 on 07/14/08

Tagged

Versions (?)

Last Edited at 07/14/08 04:49pm

Statistics

Viewed 1016 times

Favorited by 0 user(s)

Related snippets

Styles and Stylesheet Manipulation

/ Published in: JavaScript

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

Highlighted TextExpand

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

Report this snippet Tweet