JQuery рассчитать верхний предел как целое число в px - PullRequest
Новая
       16

JQuery рассчитать верхний предел как целое число в px

10 голосов
/ 19 июля 2010

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

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

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

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

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

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

Ответы [ 2 ]

11 голосов
/ 19 июля 2010

Одной из основных сильных сторон 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
    }
};
4 голосов
/ 15 ноября 2012

Насколько я знаю, 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/

...