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

回答

相关问题