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...

[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, 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?

[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...

[Enzaccio]

sembra che le stampi tutte ugualmente quindi sembra funzionare... o potrebbero esserci problemi?

Tranquillo che quello ti stampa tutto, anche i commenti se ci sono.
Il problema potrebbe stare proprio nel fatto che ti stampa tutto il malloppo che c'è tra i Tag STYLE e /STYLE mentre te mi par di capire, vorresti estrapolare solo quello che riguarda un determinato elemento (clickato).

Allora per prima cosa si andrà a recuperare la CLASS dal Tag dell' Elemento, e magari anche un ID se c'è (gli stili possono essere attribuiti anche tramite id="classe" con #classe {} nel CSS).

Poi si tratta di andarsi a passare tutto lo stringone per vedere se quel termine c'è, dove si trova, e fin dove dopo di lui dobbiamo andare a recuperare caratteri di testo.
E qui la fantasia si può sbizzarrire con gli String Methods ( search() indexOf() substr() ecc.), ma a mio parere la strada migliore è ricavarsi un Array con lo split() method basandosi sulla presenza della } di chiusura per ogni definizione nel CSS.

Facendo nell' alert :

document.getElementsByTagName("STYLE")[0].innerHTML.split("}")

ora ti trovi stampata una virgola al posto della graffa. E prova ad aggiungere altre classi nel CSS che non riguardano quel DIV.
Le virgole sono i separatori tra gli articoli dell' Array.

Infine si tratterà di estrapolare dall' array tutti quegli articoli che contengono il termine di ricerca (Valore di CLASS). In altre parole, scorrere l' array con un ciclo FOR.