Css width: calc (100% -100px); альтернатива с использованием jquery

Я бы хотел использовать width: calc(100% -100px);, который отлично выполняет работу, для чего мне это нужно, единственной проблемой является ее совместимость. На данный момент он работает только в последних браузерах и совсем не в Safari.

Могу ли я сделать альтернативу с помощью jQuery? то есть. получить 100% -ную ширину объекта -100px, а затем динамически установить результат как ширину CSS (чтобы он был отзывчивым)

Ответ 1

Если у вас есть браузер, который не поддерживает выражение calc, не сложно имитировать jQuery:

$('#yourEl').css('width', '100%').css('width', '-=100px');

Намного проще позволить jQuery обрабатывать относительный расчет, чем делать это самостоятельно.

Ответ 2

100% -100px является тем же самым

div.thediv {
  width: auto;
  margin-right:100px;
}

С помощью jQuery:

$(window).resize(function(){
  $('.thediv').each(function(){
    $(this).css('width', $(this).parent().width()-100);
  })
});

Аналогичным образом следует использовать jQuery изменить размер плагина

Ответ 3

Я думаю, что это может быть другим способом

    var width=  $('#elm').width();

    $('#element').css({ 'width': 'calc(100% - ' + width+ 'px)' });

Ответ 4

Попробуйте метод jQuery animate(), например

$("#divid").animate({'width':perc+'%'});

Ответ 5

Его не так сложно реплицировать в javascript:-), хотя он будет работать только для ширины и высоты, но вы можете расширить его в соответствии с вашими ожиданиями:-)

function calcShim(element,property,expression){
    var calculated = 0;
    var freed_expression = expression.replace(/ /gi,'').replace("(","").replace(")","");
    // Remove all the ( ) and spaces 
    // Now find the parts 
    var parts = freed_expression.split(/[\*+-\/]/gi);

    var units = {
        'px':function(quantity){
            var part = 0;
            part = parseFloat(quantity,10);
            return part;
        },
        '%':function(quantity){
            var part = 0,
            parentQuantity = parseFloat(element.parent().css(property));
            part = parentQuantity * ((parseFloat(quantity,10))/100);
            return part;
        } // you can always add more units here.
    }

    for( var i = 0; i < parts.length; i++ ){
        for( var unit in units ){
            if( parts[i].indexOf(unit) != -1 ){
               // replace the expression by calculated part.
               expression = expression.replace(parts[i],units[unit](parts[i]));
               break;
            }
        }
    }
    // And now compute it. though eval is evil but in some cases its a good friend.
    // Though i wish there was math. calc
    element.css(property,eval(expression));
}

Ответ 6

Если вы хотите использовать calc в вашем файле CSS, используйте polyfill, например PolyCalc. Должно быть достаточно легким для работы в мобильных браузерах (например, ниже iOS 6 и ниже Android 4.4).