leggere regole CSS

[Alifuma92]

io vorrei stampare tutto il css di un oggetto... il css viene assegnato non nel tag style o in un foglio di stile esterno, ma attraverso funzioni che vengono richiamate nella pagina...

esempio...
-ho un titolo h1 con id="h1"
-cliccando alcuni bottoni lo personalizzo ad esempio assegnandoli il color attraverso una funzione di questo tipo
function color(){
document.getElementById('h1').style.color = 'green';
}

-una volta finita la personalizzazione voglio stampare l'intero CSS che riguarda #h1
anche quelle regole css che riguardano la stessa proprietà ma sono differenti per i vari browser...

Da quello che ho capito dal tuo esempio (ma forse mi sbaglio) mi pare che stampi tutto quello che c'è nel tag style che riguarda un determinato elemento.

in sintesi io voglio stampare le modifiche css fatte in maniera dinamica dal client...
quindi ad esempio, se applico la funzione color() definita in precedenza poi nell'alert devo visualizzare
#h1{
color:green;
}

lo stesso deve avvenire se applico ad #h1 :
-moz-border-radius:5px;
border-radius:5px;

dovrò vedere nell'alert

#h1{
color:green;
-moz-border-radius:5px;
border-radius:5px;
}

tutte e due le regole che definiscono l'arrotondamento dei bordi... non solo quella che interrate il browser...

Spero di essermi spiegato bene.... grazie per la pazienza

[Enzaccio]

... e non per niente al punto 4 nell' alert t' ho fatto anche l' esempio per leggere un inline-style dal Tag interessato. Ci poteva anche essere un' assegnazione in-line nel documento.

Ora, le modifiche allo style che te apporti con JavaScript "diventano" inline-style appunto, ed in quella stringa te le ritroveresti - COME PUOI CONSTATARE COL MODELLO CHE UNISCO - ; ma si ri-incontra il già citato problema.
Uso sempre l' Opacità come esempio di proprietà Browser-dipendente.

IE 7 per la verità, stampa anche la opacity benché non la applichi, e in teoria la si potrebbe recuperare con le citate operazioni di stringa; ma FF 3 invece non mi stampa la proprietaria di IE filter alpha . E chissà tutti gli altri Navigatori.

Ma siccome ho capito più o meno cosa stai combinando, penso che la strada migliore sarebbe recuperare il quanto all' origine, mentre personalizzi l' elemento. "Caricando" in una variabile come testo, le istruzioni che assegni dinamicamente (che quindi ci saranno entrambe).

Per stasera smanetta con questo:

<script>

function assegna(){

 var el=document.getElementById("thediv");

 var ftr=document.getElementById("filter").value;
 el.style.filter=ftr;

 var oty=document.getElementById("opacity").value;
 el.style.opacity=oty;

 var bgc=document.getElementById("backcol").value;
 el.style.backgroundColor=bgc;

 alert(document.getElementById("thediv").outerHTML);
}
</script>

<style>
.classe {width: 50%; height: 200px; background-color: blue;}
</style>

<div align="center"><pre>
<i>( IExplorer )</i>         .style.filter = <input id="filter"  value="alpha(opacity = 50)" type="text" size="40">
<i>( Netscape ) </i>        .style.opacity = <input id="opacity" value="0.5"                 type="text" size="40">
<i>             </i>.style.backgroundColor = <input id="backcol" value="red"                 type="text" size="40"><br>
                                             <input onclick="assegna()" value="assegna" type="button"><br><br></pre>
</div>

<div id="thediv" class="classe" style="margin: auto; color:white;"><pre>

 style="margin: auto; color:white;"</pre>
</div>

[Dani1983]

Ciao,
premetto che non so cosa debba fare il tuo script.
Prova ad inserire le regole css direttamente inline nella pagina html tipo:

<div class="test" style="background-image:-webkit-linear-gradient(top right,#FFFFFF 0%, #AACFEF 100%);background-image:-moz-linear-gradient(top right,#FFFFFF 0%, #AACFEF 100%)"></div>

Poi vai a prendere l'attributo style:

varCss = $(".test").attr("style");
alert(varCss);

Spero di esserti stato d'aiuto

[Alifuma92]

enzaccio, ho capito... alla fine però se inserisco in una variabile testo i css che modifico dinamicamente avrò alcune proprietà che saranno doppie ( quelle presenti nella variabile di testo e quelle che interpreta il browser)

ad esempio applico
-moz-border-radius e salvo la regola css in una variabile
stampando i css se apro la pagina con mozzilla avrò -moz-border-radius

quindi verrà scritta due volte...
dovrei scriverne solo una...