leggere regole CSS

[Alifuma92]

ciao a tutti!

io voglio leggere le regole css associate ad un elemento ed utilizzo questa funzione.

function a (){
        var valore = $('#prova').css('backgroundImage');
    alert(valore);
}

mi mostra correttamente la regola css...
il mio problema è che se ho due regole css per la stessa proprietà (CAUSA DIVERSI BROWSER)

ad esempio cosi

#prova {
                background-image: -webkit-linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%);
background-image: -moz-linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%);
            }

nell'alert visualizzo solamente una delle due in base al browser con il quale apro la pagina.

se le volessi prelevare tutte e due in una variabile? o in variabili separate? come potrei fare?
grazie mille!

[cavicchiandrea]

Sempre che funzioni prova ad eseguire un each sul id per fargli recuperare tutte le voci css è un tentativo ma dubito che funzionerà, oppure usa una classe per ogni browser cosi separi i background-image

[Alifuma92]

Come imposto il ciclo each?
$('#prova').each($('#prova').css('backgroundImage' ));

???

Oppure dovrei creare una classe per ogni background.... Non mi sembra la soluzione più convincente però...

[Alifuma92]

Ho provato a separare le classi in questo modo

.webkit {
                background-image: -webkit-linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%);
            }
            .moz {
                                background-image: -moz-linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%);
                            }

attacco le classi ad esempio a un titolo h1

<h1 class="webkit moz" onclick="a()">TITOLO</h1>

Questa è la funzione a()

function a (){
        var valore1 = $('.webkit').css('backgroundImage');
    var valore2 = $('.moz').css('backgroundImage');
    alert(valore1);
    alert(valore2);
}

Purtroppo anche facendo cosi anche il secondo alert stampa la regola css relativa al browser che sta eseguendo la pagina...
stampa due volte la stessa regola...

Ci dev'essere qualcosa che permetta di stampare l'intero css di un oggetto...

[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

[Xinod]

delicato, ma probabilmente possibile se sai esattamente cosa cercare e dove

http://stackoverflow.com/questions/3...ith-javascript

in pratica con stylesheets rules o cssRules puoi accedere alle regole css in questione, non come vegono interpretate dal browser (altrimenti ti restituisce sempre solo quello che applica) ma esattamente come vengono definite

e' delicato perche' devi cercare nel css corretto per la regola corretta e coprire le discrepanze trai browser per rendere il tutto crossbrowser

ciao

[Alifuma92]

con questa funzione stampo tutte le regole css però ho lo stesso problema che mi stampa solo quelle interpretate e non tutte quelle che sono nel foglio di stile..

function getStyle(className) {    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;    for (var x = 0; x < classes.length; x++) {        if (classes[x].selectorText === className) {            (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);        }    }}

[Enzaccio]

Temo che la strada infine sarà leggerle da un stringa di testo ricavata:

<script>
function leggi(el){
 alert('1 el.style -> \t' + el.style + '\n' + 
       '2 el.style.filter -> \t' + el.style.filter + '\n' + 
       '3 el.style.arturo -> \t' + el.style.arturo + '\n' + 
       '4 el.outerHTML -> \t' + el.outerHTML + '\n' + 
       '5 document.getElementsByTagName("STYLE")[0].innerHTML -> \t' + document.getElementsByTagName("STYLE")[0].innerHTML + '\n' + 
       'END')
 }
</script>

<style>
.classe {filter: alpha(opacity = 50); 
         width: 200px; height: 200px; background-color: blue;}
</style>

<div class="classe" style="margin: auto; color:white; font-size: xx-large;" 
   onclick="leggi(this)">
 click me
</div>

Come vedi e già sai, se esegui su Firefox, al punto 2 .style.filter ti restituisce una stringa vuota;
.style.arturo con una proprietà che non esiste non manda in blocco lo script, ma qui il browser che non la riconosce restituisce undefined invece di stringa vuota. Vuol dire che una qualche collection delle proprietà altrui la hanno, nei meandri ...

[Alifuma92]

enzaccio questo metodo mi sembra funzionare bene per leggere l'intero contenuto dello style... pero se io modifico in tempo reale il CSS attraverso un bottone con questa funzione:

function cambiacolore(){
document.getElementByClassName('.classe').style.co lor = 'green';
}

la regola css:
color: green;

non viene scritta nell alert ovviamente perché è stata modificata dal client...

[Alifuma92]

Enzaccio, ho fatto alcune prove e sembra che le stampi tutte ugualmente quindi sembra funzionare... a me interessa la stampa di tutte le regole CSS...

.classe {    filter: alpha(opacity = 50);     width: 200px; height: 200px;    background-image: -webkit-linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%);    background-image: -moz-linear-gradient(top right, #FFFFFF 0%, #AACFEF 100%);}

ho aggiunto queste... e nell'alert le stampa tutte quindi mi sembra ok. o potrebbero esserci problemi?