Comments on: Dynamic CSS pseudo class styles with jQuery

By: Nick

Nick — Sat, 02 Jan 2010 20:51:13 +0000

Thanks for that, the source has been updated

By: Vishal Vasani

Vishal Vasani — Mon, 28 Dec 2009 14:56:49 +0000

Hello,

There an error in your StyleSheet.001.js. download file and demo also…
// IE
var rules = sh.compileToRules();

replace above line with below
// IE
var rules = styleSheet.compileToRules();

By: Nick

Nick — Sun, 22 Nov 2009 20:31:16 +0000

If you move the instantiation of the StyleSheet object outside the function then it will be in the global namespace. This will allow you to consecutively call the function with different tags, updating the same StyleSheet object and therefore not overriding the previous style each time you call the function.

Something like:

var sheet = new StyleSheet();

function create_sheet(whichtag) {

// Create a CSS element to set colour to red
var elementBasic = new StyleSheetElement(“color”, “#000000″);

// Attach the CSS element to the CSS description for “a”
var tagA = sheet.addElementToTag(whichtag, elementBasic);

// Rest of your code carries on….

}

By: clive

clive — Sun, 22 Nov 2009 16:38:23 +0000

hi – I am passing a parameter to fn which is fine
$(create_sheet(“li”));

I would like to add $(create_sheet(“a”));
so both apply – is this possible?

code below….

function create_sheet(whichtag) {
var sheet = new StyleSheet();

// Create a CSS element to set colour to red
var elementBasic = new StyleSheetElement(“color”, “#000000″);

// Attach the CSS element to the CSS description for “a”
var tagA = sheet.addElementToTag(whichtag, elementBasic);

// Set the order of the tag for “a” whichtag
tagA.order = 2;

// Create a CSS element to set colour to red
var elementHover = new StyleSheetElement(“color”, “#ff0000″);

// Attach the CSS element to the CSS description for “a:hover”

var tagHover = sheet.addElementToTag(whichtag + “:hover”, elementHover);

// Set the order of the tag for “a:hover”, will appear beore “a”
tagHover.order = 1;

// Create a stylesheet for the new elements and add it to the page (replaces it if one already exists)
addInlineStyleSheet(sheet);
}