Revision: 7218
Updated Code
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
Updated Code
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
Updated Code
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
Updated Code
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
Updated Code
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
Updated Code
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
Updated Code
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
Updated Code
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
Updated Code
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
Updated Code
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
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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