/ Published in: JavaScript
Useful functions to get around browser incompatibilities when working with stylesheets.
If you find any errors, please leave a comment.
If you find any errors, please leave a comment.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
//**************************************************************** //*************************** 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; }