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