Can Javascript add a new style class ?

pamelafluente · Sep 28, 2006

Hi guys,

Is it possible to add "onload" (via Javascript) a new class to the
<style> header section?
If yes, how would that be done ?

<style type="text/css" media="screen">
.NewStyleClass{ whatever }
</style>

-P

Evertjan. · Sep 28, 2006

wrote on 28 Sep 2006 in comp.lang.javascript:

Hi guys,

Is it possible to add "onload" (via Javascript) a new class to the
<style> header section?
If yes, how would that be done ?

<style type="text/css" media="screen">
.NewStyleClass{ whatever }
</style>

<http://www.thescripts.com/forum/post343885-2.html>

agapeton · Sep 29, 2006

You need to state the purpose and end result of what you are doing.
Perhaps there's a right way to do it that's not a complete hack.

scriptguru · Sep 29, 2006

(e-mail address removed) Ð½Ð°Ð¿Ð¸ÑÐ°Ð²:

Hi guys,

Is it possible to add "onload" (via Javascript) a new class to the
<style> header section?
If yes, how would that be done ?

<style type="text/css" media="screen">
.NewStyleClass{ whatever }
</style>

-P

what about document.write()? (But not with onload)
or document.createElement("STYLE") (with onload)?

pamelafluente · Sep 29, 2006

Thanks guys, I going to check those suggestions.

Is it going to work with both MSIE and FF (that's the minimum
compatibility I need) ?

The purpose is simply that I want to add some css/html
dinamically from javascript. It's kind of optional code that
I need to add "onload" only under some circumstances.

-P

ASM · Oct 24, 2006

(e-mail address removed) a écrit :

The purpose is simply that I want to add some css/html
dinamically from javascript. It's kind of optional code that
I need to add "onload" only under some circumstances.

<html>
<script type="text/javascript">

function newClass(class, attributes) {
var S = document.createElement('style');
S.type = 'text/css';
var T = '.'+class+' { '+attributes+' }';
T = document.createTextNode(T)
S.appendChild(T);
document.body.appendChild(S);
}

</script>

<style type="text/css">
p { color: blue; cursor: pointer; font-size: 2em }
</style>

<p
onclick="newClass('pizza','color:lime;background:#F33;text-align:center');
this.className=this.className==''?'pizza':'';">
voici un petit essai de pizza<br>
little test : pizza ?<br>
poi ? pizza ?
</p>
</html>

Don't know if that works with IE

Peter Michaux · Oct 28, 2006

Thanks guys, I going to check those suggestions.

Is it going to work with both MSIE and FF (that's the minimum
compatibility I need) ?

The purpose is simply that I want to add some css/html
dinamically from javascript. It's kind of optional code that
I need to add "onload" only under some circumstances.

Why not have the various possible CSS options already statically
waiting the stylesheet and then add the correct class to the body
element to activate whatever you want? Using decendent selectors this
is very flexible.

Here is an example

http://evil.che.lu/

Peter

Add recipes using JavaScript in table	20	Apr 17, 2023
Javascript DOM	1	Mar 29, 2023
Help with my responsive home page	2	Dec 14, 2022
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
Clickable Div Block	1	Oct 13, 2023
How can I get my menu inside of a menu to function properly?	1	Jan 19, 2023
JQuery add shadow error	4	Sep 1, 2023
Add Image and label dynamically inside the dropdown	2	Mar 11, 2022

Can Javascript add a new style class ?

pamelafluente

Evertjan.

agapeton

scriptguru

pamelafluente

ASM

Peter Michaux

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads