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]

Re: HOW TO: Create Style/Class Elements Programmaticall y

gsb wrote:
[color=blue]
> Is there a way to create, say createElement( "STYLE"), to create new classes
> or style sheets from within JavaScript?[/color]

Yes.
[color=blue]
> Thanks,[/color]

Welcome.

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

[DU]

Re: HOW TO: Create Style/Class Elements Programmaticall y

gsb wrote:[color=blue]
> Is there a way to create, say createElement( "STYLE"), to create new classes
> or style sheets from within JavaScript?
>
> Thanks,
>
> gsb
>
>[/color]


To create a new stylesheet:

var AccessibilitySt yleSheet = document.create StyleSheet("Acc essibility
style sheet", "projection,scr een,tv");
For the general syntax, see:

http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-DOMImplementationCSS-createCSSStyleSheet

To populate that stylesheet:

AccessibilitySt yleSheet.insert Rule("p {color:green; font-size:120%}", 0);
AccessibilitySt yleSheet.insert Rule("div.someC lassName
{background-color:blue}", 1);

For the general syntax, see:

http://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/css.html#CSS-CSSStyleSheet-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]

Re: HOW TO: Create Style/Class Elements Programmaticall y



gsb wrote:[color=blue]
> Is there a way to create, say createElement( "STYLE"), to create new classes
> or style sheets from within JavaScript?[/color]

Have a look at

http://groups.google.com/groups?q=add+stylesheet+author:honnen&hl=en&lr=&ie=UTF-8&oe=UTF-8&scoring=d&selm=3fff06dc%240%2417574%249b4e6d93%40newsread4.arcor-online.net&rnum=4

--

Martin Honnen

http://JavaScript.FAQTs.com/

[DU]

Re: HOW TO: Create Style/Class Elements Programmaticall y

DU wrote:[color=blue]
> gsb wrote:
>[color=green]
>> Is there a way to create, say createElement( "STYLE"), to create new
>> classes
>> or style sheets from within JavaScript?
>>
>> Thanks,
>>
>> gsb
>>
>>[/color]
>
>
> To create a new stylesheet:
>
> var AccessibilitySt yleSheet = document.create StyleSheet("Acc essibility
> style sheet", "projection,scr een,tv");[/color]

It should have been written rather

var AccessibilitySt yleSheet =
document.create CSSStyleSheet(" Accessibility style sheet",
"projection,scr een,tv");

As far as I know, currently no browser support createCSSStyleS heet.

document.implem entation.create CSSStyleSheet() Not Implemented

http://bugzilla.mozilla.org/show_bug.cgi?id=63850

[color=blue]
> For the general syntax, see:
> http://www.w3.org/TR/2000/REC-DOM-Le...eCSSStyleSheet
>
>
>
> To populate that stylesheet:
>
> AccessibilitySt yleSheet.insert Rule("p {color:green; font-size:120%}", 0);
> AccessibilitySt yleSheet.insert Rule("div.someC lassName
> {background-color:blue}", 1);
>[/color]

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

will work in Mozilla-based browsers.

DU
[color=blue]
> 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[/color]

[Martin Honnen]

Re: HOW TO: Create Style/Class Elements Programmaticall y



DU wrote:
[color=blue]
> DU wrote:
>[color=green]
>> gsb wrote:
>>[color=darkred]
>>> Is there a way to create, say createElement( "STYLE"), to create new
>>> classes
>>> or style sheets from within JavaScript?[/color]
>>
>> To create a new stylesheet:
>>
>> var AccessibilitySt yleSheet = document.create StyleSheet("Acc essibility
>> style sheet", "projection,scr een,tv");[/color]
>
>
> It should have been written rather
>
> var AccessibilitySt yleSheet =
> document.create CSSStyleSheet(" Accessibility style sheet",
> "projection,scr een,tv");
>[/color]

No, it should be
document.implem entation.create CSSStyleSheet(. .., ...)
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]

Re: HOW TO: Create Style/Class Elements Programmaticall y

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

gsb

"gsb" <gsb@QWest.ne t> wrote in message
news:f5zYb.145$ 9B3.51516@news. uswest.net...[color=blue]
> Is there a way to create, say createElement( "STYLE"), to create new[/color]
classes[color=blue]
> or style sheets from within JavaScript?
>
> Thanks,
>
> gsb
>
>[/color]

[Duderonomoy]

Re: HOW TO: Create Style/Class Elements Programmaticall y

On Thu, 19 Feb 2004 09:17:11 -0800, gsb wrote:
[color=blue]
> Thanks all.
> Looks like I can get it to work.
>
> gsb
>[/color]

Hi,

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

What was the scenario for generating style data dynamically?

Thx
DK