Referenziare il CSS da javascript

[antonello_f]

Ciao,
in una pag HTML statica, creo tramite javascript un tag <div> che possiede le proprietà di una regola del CSS ma di cui voglio assegnare dinamicamente le proprietà margin-top e margin-left:

document.write("<div id='myDiv' style='...'>testo</div>");
...
...
document.getElementById("myDiv").style.marginLeft= ...;
document.getElementById("myDiv").style.marginTop=. ..;

il problema è che se viene modificato il CSS in questo modo non si propaga automaticamente sullo stile del DIV ma dovrò ricordarmi di andare a manina a correggerlo.
Vorrei sapere se è possibile passare allo style del mio DIV le solo proprietà che m'interessano del CSS.
Grazie x la collaborazione

[Mich_]

Potresti preparare due stili diversi, ed assegnare tutto uno stile al tuo blocco:

document.getElementById("myDiv").className = 'NOMECLASSE';

(questo suppone che non usi classi doppie (multiple) in un unico blocco; se lo fai occorre modificare il codice)

Esempio:

CSS:
.classe1 {
  /* formattazione default */
}
.classe2 {
  /* formattazione modificata */
}

HTML:
<div id='myDiv' class='classe1'>testo</div>

JS:
document.getElementById("myDiv").className = 'classe2';

[antonello_f]

Purtroppo non modifico io direttamente i CSS mi limito ad utilizzare le classi già esistenti, perciò stavo cercando una soluzione che mi consentisse di fare tutto lato Javascript.
Grazie comunque.

[Mich_]

Non e` una buona idea.

Una pagina Web si compone di varie parti:
- contenuto -- (X)HTML
- formattazione/presentazione -- CSS
- dinamica - JS (ECMAScript)

La cosa migliore e` tenere le tre parti ben divise, perche` aumenta moltissimo la facilita` di manutenzione e l'accessibilita` (anche con browser non visuali).

Il mio consiglio va in tale direzione: proprio nel separare la presentazione dal JS.

Eventualmetne puoi inserire il CSS tramite JS:

var  codcss = '\<style type\=\"text\/css\"\>\n';
  codcss += '.classe1 {\n';
  ...
  codcss += '.classe2 {\n';
   ...
  codcss += '\<\/style\>';
document.write(codcss);

Non e` la soluzione piu` pulita, ma sicuramente ti permette di fare quello che volevi.

[antonello_f]

Si non è una soluzione elegante ma è uno di quei casi in cui non hai molte alternative. Quello che pensavo era di sfruttare il modello DOM per accedere alle classi del CSS e recuperarne le proprietà, per intederci sfruttare l'oggetto document.styleSheet.

[standard]

Originariamente inviato da antonello_f
Si non è una soluzione elegante ma è uno di quei casi in cui non hai molte alternative. Quello che pensavo era di sfruttare il modello DOM per accedere alle classi del CSS e recuperarne le proprietà, per intederci sfruttare l'oggetto document.styleSheet.

http://pro.html.it/articoli/id_211/idcat_27/pro.html