jQuery calculer padding-top en entier px

Question

La seule solution que j'ai trouvé est ($(this).innerHeight() - $(this).height())/2

Mais/2 n'est pas bonne option, car l'utilisateur peut avoir padding-top: 0px et padding-bottom: 20px.

Existe-t-il un moyen d'obtenir des valeurs de remplissage plus précises?

Je pensais à css('padding-top'), puis l'analyse syntaxique, en prenant seulement int partie, mais la valeur peut être « em », par exemple, et non dans « px »

Ensuite, faire une déclaration de commutation pour chaque type de valeur? Pour un, pour un autre?

C'est un peu compliqué et prend plus de place dans le code ...

Answer 1

L'une des forces principales de jQuery est qu'il est si connectable, donc si vous avez un besoin qui est pas immédiatement satisfaite par la bibliothèque , il y a un vaste paysage de plugins à rechercher. Et s'il n'y en a pas qui fait ce que vous voulez, c'est vraiment facile de rouler le vôtre.
Je pense que la meilleure façon d'aller ici, si vous ne pouvez pas trouver un plugin qui fait ce que vous voulez, est le dernier: écrire le vôtre. Cependant, assurez-vous d'avoir bien compris les spécifications de votre plugin. Que devrait-il retourner si l'élément n'a pas de paramètre CSS pour le remplissage? Devrait-il retourner le style sur cet élément, ou le style calculé? Que se passe-t-il pour les css invalides (disons 'padding-top: 10 unitsThatDontExist;' ou 'padding-left: two;')?

Pour get you started - c'est ce que vous utilisez votre propre plug-in pourrait ressembler dans votre code:

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

Pour rendre disponible, il suffit d'écrire un plugin comme ceci:

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

En ce qui concerne Je sais, getComputedSyle et cross cross equivalents sont utilisés dans jQuery lors de la demande de .css ("padding-top") donc ils devraient déjà avoir été convertis en pixels.

Une autre façon de calculer le rembourrage est le suivant

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

situé à: http://jsfiddle.net/oatkiller/9t9RJ/1/