Definire stile dinamicamente tramite JS

[phollia]

Salve

il problema è questo:
ho un blocco (DIV) individuato tramite la classe (CLASS=... / .mia_classe). Mi serve andare a mettere prima di questo blocco una immagine.
La cosa la faccio tramite CSS utilizzando la pseudoclasse :before e content più altre direttive per la corretta visualizzazione.

Adesso, ho l'esigenza di fare questo solo in particolari periodi e quindi, potendo operare solo lato client, vorrei impostare il css

   .miaclasse:before {content ...} 

solo quando sono soddisfatti i requisiti temporali tramite JS.

Ecco. Ma come faccio a definire tutto questo css tramite JS?

[GraphOGLRisorse]

Salve,
intende far apparire l'immagine solo in determinati orari della giornata, o fa riferimento a specifiche azioni da parte di un evenutale utente?

Può indicare nello specifico, quali sono le condizioni in cui si deve vedere l'immagine?

Cordiali saluti.

[phollia]

Il problema non è nella condizione che comunque consiste solo nella verifica del giorno del mese (qui ad esempio se deve apparire solo giorno 5 del mese):

var d = new Date();
if(d.getDate() == 5) {
   ...
}

il fatto è che mi serve impostare le proprietà CSS da JS.

NB: NON posso usare document.write("<style>"...)

[GraphOGLRisorse]

La pseudo classe css può gestirla da js così:

var div = document.getElementById("miaclasse");

var d = new Date();
if(d.getDate() == 5) {
  div.pseudoStyle("before","display","block");
}
else{
  div.pseudoStyle("before","display","none");
}

Comnuque nel caso di html e css, in alternativa a document.write(), può usare innerHTML:

document.getElementById("miaclasse").innerHTML

Cordiali saluti.

[phollia]

A parte che non posso ottenere l'elemento con getElementById ma dovrei usare getElementsByClassName (la struttura è fuori dal mio controllo e posso intervenire solo attraverso la classe), nell'assegnare lo stile ATTRAVERSO la pseudoclasse :before devo impostare non solo la visibilità ma avevo già scritto, il CONTENT, vertical-align, margin, display, ecc.

Non mi serve solo Hide/Show.

Alla fine della conta all'elemento avente classe "mia_classe" devo applicare uno stile del genere:

.mia_classe:before {
   content: url(xxx);
   vertical-align: middle; 
   margin-left: xxx px; 
   display: inline-block;
}

ma in maniera dinamica.
Non posso scriverlo prima altrimenti verrebbe applicato subito.

PS: .pseudoStyle non è nativa di JS, va definita (e non posso farlo).

[phollia]

Ho risolto per altra via.

Ho definito una NUOVA classe con tutti le impostazioni volute e tramite JS aggiungo questa classe (e tutto il :before) quando serve, all'elemento interessato.