css Breedte: berekend (100% -100px); alternatief gebruik van jQuery

Ik wil graag gebruik width: calc(100% -100px);, die het werk perfect doet voor wat ik het voor nodig, het enige probleem is de compatibiliteit. Op dit moment werkt alleen in de nieuwste browsers en helemaal niet in Safari.

Kan ik een alternatief voor het gebruik van jQuery? d.w.z. eerst de breedte van een voorwerp -100px 100% en vervolgens dynamisch instellen van het resultaat als de breedte CSS (dus ontvankelijk zou zijn)

Antwoord 1, Autoriteit 100%

Als u een browser die geen ondersteuning van de calcuitdrukking, het is niet moeilijk om na te bootsen met jQuery:

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

Het is veel gemakkelijker te laten jQuery omgaan met de relatieve berekening dan het zelf te doen.

Antwoord 2, Autoriteit 23%

Ik denk dat dit kan een andere manier zijn

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

Antwoord 3, Autoriteit 16%

100% -100px hetzelfde

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

Met jQuery:

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

Soortgelijke manier is om jQuery resize plugin

gebruiken

Antwoord 4

Probeer jQuery animate()methode, ex.

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

Antwoord 5

Het is niet zo moeilijk om te repliceren in javascript :-), maar het zal enige werk voor de breedte en de hoogte van de beste, maar je kunt het uit te breiden als je per verwachtingen 🙂

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

Antwoord 6

Als u wilt calc gebruiken in uw CSS-bestand gebruik een polyfill zoals PolyCalc . Moet licht genoeg om te werken op mobiele browsers (bijvoorbeeld lager dan iOS 6 en lager Android 4.4 telefoons) zijn.