css寬度：calc（100％-100px）;替代使用jquery

我想使用width: calc(100% -100px);完成這項工作，我需要它的唯一問題是它的兼容性。目前它只能在最新的瀏覽器中運行，而在Safari中則完全不能運行。css寬度：calc（100％-100px）;替代使用jquery

我可以使用jQuery替代嗎？即。獲得對象的100％寬度-100px，然後將結果動態設置爲CSS寬度（因此它將是響應）

來源

2012-06-20 sam

使用CSS（{ '寬度'： '計算值（100％-100px）'}）。 –

100

如果您的瀏覽器不支持calc表達式，則不難模擬與jQuery：

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

讓jQuery處理相對計算比自己做更容易。

來源

2012-06-20 10:10:24 lonesomeday

[http://tobiasahlin.com/blog/quick-guide-chaining-in-jquery/](http://tobiasahlin.com/blog/quick-guide-chaining-in-jquery/） – shareef

+13

它工作時窗口已調整大小？ – odiszapc

@odiszapc add'$（window）.resize（function（）{/ *把jquery的計算代碼放在這裏* /}）;'所以它會在窗口大小調整時自動計算寬度。 –

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

來源

2012-06-20 10:10:52 odiszapc

與頂部的例子，如果項目是'position：absolute;頂部：0;左：0; ' – sam

我認爲它不是 – odiszapc

@sam：如果是這樣的話，只需要添加'right：100px' ... – thirtydot

嘗試jQuery的animate()方法，恩。

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

來源

2012-06-20 10:17:36 Ajai

我實際上試圖用上面描述的calc函數使用動畫，但遇到了麻煩：'$（'＃button-sidebar'）。animate（{width：calc（50％+ 20px ）}，400）;' – bhoward

我不認爲你可以使用jQuery來動態計算Css變量。你可以在同一個動作中對'width'，'100％'和''width'，' - = 100px''進行動畫處理，並且它會做你想做的。 –

它並不難，在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)); 
}

來源

2013-06-15 13:27:58 ShrekOverflow

它需要一個使用示例。 – Nowaker

如果工作，但你可以擴展它你想在你的CSS文件中使用calc，使用像PolyCalc這樣的polyfill。應該足夠輕便，可以在移動瀏覽器上工作（例如，iOS 6以下的Android 4.4手機）。

來源

2014-03-20 22:27:51 Nux

我認爲這可能是另一種方式以這種方式與jquery $（ '＃dataElement'）

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

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

來源

2014-09-29 14:19:24

css寬度：calc（100％-100px）;替代使用jquery

回答

相關問題