JQuery вычисляет padding-top как целое число в px

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

Но/2 не является правильным вариантом, потому что пользователь может иметь padding-top: 0px и padding-bottom: 20px.

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

Я думал о css('padding-top'), а затем разбирал его, беря только int part, но значение может быть в "em", например, а не в "px"

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

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

ОТВЕТЫ

Ответ 1

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

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

В начните - вот что может сделать ваш собственный плагин в вашем коде:

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
    }
};

Ответ 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/