HOW TO: Create Style/Class Elements Programmatically

[gsb]

Is there a way to create, say createElement( "STYLE"), to create new classes
or style sheets from within JavaScript?

Thanks,

gsb

[Randy Webb]

gsb wrote:

Is there a way to create, say createElement( "STYLE"), to create new classes
or style sheets from within JavaScript?
Yes.
Thanks,

Welcome.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/

[DU]

gsb wrote:

Is there a way to create, say createElement( "STYLE"), to create new classes
or style sheets from within JavaScript?

Thanks,

gsb

To create a new stylesheet:

var AccessibilityStyleSheet = document.createStyleSheet("Accessibility
style sheet", "projection,screen,tv");
For the general syntax, see:
http://www.w3.org/TR/2000/REC-DOM-Le...eCSSStyleSheet
To populate that stylesheet:

AccessibilityStyleSheet.insertRule("p {color:green; font-size:120%}", 0);
AccessibilityStyleSheet.insertRule("div.someClassN ame
{background-color:blue}", 1);

For the general syntax, see:
http://www.w3.org/TR/2000/REC-DOM-Le...eet-insertRule

The methods given are standard W3C DOM 2 CSS methods. You should expect
only recent browsers (like Mozilla 1.5+, Opera 7.5, Safari 1.2,
Konqueror 3.2) to support these W3C methods: untested and unverified.
MSIE uses different methods.

DU

[Martin Honnen]

gsb wrote:

Is there a way to create, say createElement( "STYLE"), to create new classes
or style sheets from within JavaScript?

Have a look at
http://groups.google.com/groups?q=ad...ine.net&rnum=4

--

Martin Honnen
http://JavaScript.FAQTs.com/

[DU]

DU wrote:

gsb wrote:

Is there a way to create, say createElement( "STYLE"), to create new
classes
or style sheets from within JavaScript?

Thanks,

gsb

To create a new stylesheet:

var AccessibilityStyleSheet = document.createStyleSheet("Accessibility
style sheet", "projection,screen,tv");

It should have been written rather

var AccessibilityStyleSheet =
document.createCSSStyleSheet("Accessibility style sheet",
"projection,screen,tv");

As far as I know, currently no browser support createCSSStyleSheet.

document.implementation.createCSSStyleSheet() Not Implemented
http://bugzilla.mozilla.org/show_bug.cgi?id=63850
For the general syntax, see:
http://www.w3.org/TR/2000/REC-DOM-Le...eCSSStyleSheet

To populate that stylesheet:

AccessibilityStyleSheet.insertRule("p {color:green; font-size:120%}", 0);
AccessibilityStyleSheet.insertRule("div.someClassN ame
{background-color:blue}", 1);

document.styleSheets[0].insertRule("p {color:green; font-size:120%}", 1);
document.styleSheets[0].insertRule("div.someClassName
{background-color:blue}", 1);

will work in Mozilla-based browsers.

DU
For the general syntax, see:
http://www.w3.org/TR/2000/REC-DOM-Le...eet-insertRule
The methods given are standard W3C DOM 2 CSS methods. You should expect
only recent browsers (like Mozilla 1.5+, Opera 7.5, Safari 1.2,
Konqueror 3.2) to support these W3C methods: untested and unverified.
MSIE uses different methods.

DU

[Martin Honnen]

DU wrote:

DU wrote:

gsb wrote:

Is there a way to create, say createElement( "STYLE"), to create new
classes
or style sheets from within JavaScript?

To create a new stylesheet:

var AccessibilityStyleSheet = document.createStyleSheet("Accessibility
style sheet", "projection,screen,tv");

It should have been written rather

var AccessibilityStyleSheet =
document.createCSSStyleSheet("Accessibility style sheet",
"projection,screen,tv");

No, it should be
document.implementation.createCSSStyleSheet(..., ...)
but that is not supported by Mozilla or other browsers and wouldn't help
as the DOM spec itself admits that there is no way to associate the
created stylesheet with a document.
--

Martin Honnen
http://JavaScript.FAQTs.com/

[gsb]

Thanks all.
Looks like I can get it to work.

gsb

"gsb" <gs*@QWest.net> wrote in message
news:f5*****************@news.uswest.net...

Is there a way to create, say createElement( "STYLE"), to create new classes or style sheets from within JavaScript?

Thanks,

gsb

[Duderonomoy]

On Thu, 19 Feb 2004 09:17:11 -0800, gsb wrote:

Thanks all.
Looks like I can get it to work.

gsb

Hi,

I am curious... and late to thsi thread...

What was the scenario for generating style data dynamically?

Thx
DK