jQuery calcolare padding-top, come valore intero px

Question

L'unica soluzione che ho trovato è ($(this).innerHeight() - $(this).height())/2

Ma/2 non è diritto di opzione, perché l'utente può avere padding-top: 0px e padding-bottom: 20px.

C'è un modo per rendere più accurati i valori di riempimento?

Stavo pensando a css('padding-top') e poi analizzarlo, prendendo solo int parte, ma valore può essere in "em" per esempio e non in "px"

poi fare un'istruzione switch per ogni tipo di valore? Per uno, per un altro?

E 'tutto un po' complicato e richiede più spazio in codice ...

Answer 1

Uno dei principali punti di forza di jQuery è che è così pluggable, quindi se avete un bisogno che non è immediatamente soddisfatto dalla libreria , c'è un vasto panorama di plugin da cercare. E se non c'è nessuno che fa quello che vuoi, è davvero facile far girare il tuo.
Penso che il modo giusto per andare qui, se non riesci a trovare un plugin che fa quello che vuoi, è l'ultimo: scrivere il tuo.

Tuttavia, assicurarsi di essere chiari con le specifiche del proprio plug-in. Cosa dovrebbe restituire se l'elemento non ha impostazioni CSS per il riempimento? Dovrebbe restituire lo stile su questo elemento, o lo stile calcolato? Cosa succede per i css non validi (ad esempio 'padding-top: 10 unitsThatDontExist;' o 'padding-left: two;')?

Per get you started - questo è ciò che utilizzando il proprio plug-in potrebbe apparire come nel codice:

var topPadding = $('#anElement').padding('top'); 

per far sì che a disposizione, basta scrivere un plugin come questo:

$.fn.padding(direction) { 
    // calculate the values you need, using a switch statement 
    // or some other clever solution you figure out 

    // this now contains a wrapped set with the element you apply the 
    // function on, and direction should be one of the four strings 'top', 
    // 'right', 'left' or 'bottom' 

    // That means you could probably do something like (pseudo code): 
    var intPart = this.css('padding-' + direction).getIntegerPart(); 
    var unit = this.css('padding-' + direction).getUnit(); 

    switch (unit) 
    { 
     case 'px': 
      return intPart; 
     case 'em': 
      return ConvertEmToPx(intPart) 
     default: 
      // Do whatever you feel good about as default action 
      // Just make sure you return a value on each code path 
    } 
}; 

Answer 2

Per quanto riguarda So che getComputedSyle e cross browser equivalents sono usati in jQuery quando si richiede .css ("padding-top") in modo che dovrebbero essere già stati convertiti in pixel.

Un altro modo per calcolare l'imbottitura è la seguente

$.fn.padding = function() { 
    // clone the interesting element 
    // append it to body so that CSS can take effect 
    var clonedElement = this. 
     clone(). 
     appendTo(document.body); 

    // get its height 
    var innerHeight = clonedElement. 
     innerHeight(); 

    // set its padding top to 0 
    clonedElement.css("padding-top","0"); 

    // get its new height 
    var innerHeightWithoutTopPadding = clonedElement. 
     innerHeight(); 

    // remove the clone from the body 
    clonedElement.remove(); 

    // return the difference between the height with its padding and without its padding 
    return innerHeight - innerHeightWithoutTopPadding; 

}; 

// Test it 

console.log($("div").padding()); // prints 19 in Chrome 23 
console.log($("div").css("padding-top")); // prints 19.733333587646484px 

Situato a: http://jsfiddle.net/oatkiller/9t9RJ/1/