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

Question

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

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

Answer 1

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

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

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

Answer 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 resize plugin

Answer 3

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

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

Answer 4

Его не трудно воспроизвести в 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)); 
} 

Answer 5

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

Answer 6

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

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

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