jQuery calcular padding-top como entero en px

Question

La única solución que he encontrado es ($(this).innerHeight() - $(this).height())/2

Pero/2 no es la opción correcta, porque el usuario puede tener padding-top: 0px y padding-bottom: 20px.

¿Hay alguna manera de hacer valores de relleno más precisos?

Estaba pensando en css('padding-top') y luego analizarlo, tomando sólo int parte, pero el valor puede estar en "em", por ejemplo, y no en "px"

luego hacer sentencia switch para cada tipo de valor? Para em one, para px otro?

Es todo un poco complicado y requiere más espacio en el código ...

Answer 1

Uno de los principales puntos fuertes de jQuery es que es tan enchufable, por lo que si usted tiene una necesidad que no está satisfecha de inmediato por la biblioteca , hay un gran panorama de complementos para buscar. Y si no hay ninguno que haga lo que quiere, es realmente fácil hacer el suyo.
Creo que el camino correcto para ir aquí, si no puede encontrar un complemento que haga lo que quiere, es el último: escribir el suyo.

Sin embargo, asegúrese de ser claro consigo mismo en las especificaciones de su complemento. ¿Qué debería devolver si el elemento no tiene ninguna configuración CSS para el relleno? ¿Debería devolver el diseño de este elemento o el estilo calculado? ¿Qué ocurre con css no válido (digamos 'padding-top: 10 unitsThatDontExist;' o 'padding-left: two;')?

Para get you started - esto es lo que utiliza su propio conector podría ser similar en el código:

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

para hacer esa disposición, acaba de escribir un plugin de la siguiente manera:

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

Por lo Lo sé, getComputedSyle y los equivalentes de navegador cruzado se usan en jQuery cuando se solicita .css ("padding-top"), por lo que ya deberían haberse convertido a píxeles.

Otra forma de calcular el relleno es como sigue

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

Ubicado en: http://jsfiddle.net/oatkiller/9t9RJ/1/