[PILLOLA][CSS] Recuperare i valori

[Jarno]

tramite {oggetto}.style.{proprità} si manipola i valori ad un livello "inline" che per la scrittura può andare bene poichè si impongono su quelli del file css, ma per la lettura è un problema, poichè non legge appunto i valori del file css

e quindi, dopo aver perso un altro grado di vista, 3 etti di capelli, e una giornata della mia vita, ho deciso di chiedere la redenzione per i moccoli che ho tirato, condividendo con voi la soluzione, sperando che non sia l'ennesia scoperta dell'acqua calda

Campagna contro la caduta dei capelli
oltre a ciò che è possibile fare con quanto spiegato in questa ottima guida intitolata Cambiare al volo i fogli di stile, grazie al contributo di questo codice e di questo codice, sono arrivato alla versione finale:

function getCssProperty(el,styleCss){
  // se invece dell'oggetto fosse passato solo l'id, allora recupero l'oggetto
  if(typeof(el)=='string') var el = document.getElementById(el);

    // funzione per converite la sintassi Css in quella usata da Javascript
    function toCamelCase(s) {
        for(var exp = toCamelCase.exp; 
            exp.test(s); s = s.replace(exp, RegExp.$1.toUpperCase()) );
        return s;
    }
    toCamelCase.exp = /-([a-z])/;
    var styleJs=toCamelCase(styleCss);
    
    // se l'elemento avesse già un valore inline (che predomina) restituisco quello
    var value = el.style[styleCss];
    if(!value)
        // metodo x FF: vuole il nome della proprietà con la sintassi originale
        if(document.defaultView)    value = document.defaultView.getComputedStyle(el, null).getPropertyValue(styleCss);
        // metodo x IE: vuole il nome della proprietà con la sintassi javascript
        else if(el.currentStyle)    value = el.currentStyle[styleJs];
    return value;
} 

l'uso è semplice:

getCssProperty('IdElemento','background-color'); 

equivalente a

getCssProperty(document.getElementById('IdElemento'),'background-color'); 

[Xinod]

interessante, merita il link in script/discussioni utili

un paio di note al riguardo:

con unita' di misura diverse da px nel css, per es. em
i browser aderenti agli standard si lanciano in una gratuita conversione in px
mentre IE6+ restituisce la misura in em
(opera non imita IE in questo frangente)

idem con i colori:
IE riporta le triplette, anche nel caso di triplette di singoli esadecimali (#f00)
gli altri convertono sempre in rgb(rrr,ggg,bbb), finanche i colori specificati via nome (background-color:aquamarine)

ciao