JQuery вычислить обивка-топ в виде целого числа в пикс

Question

Единственное решение я нашел это ($(this).innerHeight() - $(this).height())/2

Но/2 не является правильным вариантом, так как пользователь может иметь обивка-топ: 0px и обивка-дно: 20px.

Есть ли способ сделать более точные значения заполнения?

Я думал о css('padding-top'), а затем разобрать его, взяв только ИНТ часть, но значение может быть в «эм», например, а не в «рх»

Затем сделать переключатель заявление для каждого типа значения? Для em один, для px другой?

Это все немного сложнее и занимает больше места в коде ...

Answer 1

Одним из главных достоинств JQuery является то, что это так коммутацией, так что если у вас есть необходимость, что сразу не удовлетворяет библиотека , есть огромный ландшафт плагинов для поиска. И если нет никого, что бы делало то, что вы хотите, это действительно легко сворачивать самостоятельно.
Я думаю, что правильный путь сюда, если вы не можете найти плагин, который делает то, что вы хотите, является последним: написать свой собственный.

Однако убедитесь, что вы сами поняли спецификации своего плагина. Что он должен вернуть, если элемент не имеет настройки css для заполнения? Должен ли он вернуть стиль этого элемента или вычисленный стиль? Что происходит с недопустимым css (например, «padding-top: 10 unitsThatDontExist;» или «padding-left: two;»)?

Для get you started - это то, что, используя собственный плагин может выглядеть в коде:

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

Чтобы сделать что доступно, просто написать плагин так:

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

Насколько Я знаю, getComputedSyle и кросс-браузерные эквиваленты используются в jQuery при запросе .css («padding-top»), поэтому они должны были быть преобразованы в пиксели.

Другой способ вычислить отступы следующим

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

расположен по адресу: http://jsfiddle.net/oatkiller/9t9RJ/1/