CSS宽度：calc（100％ -100px）的替代方法使用jQuery。

Question

我想使用width: calc(100% -100px);，它完美地完成了我需要的工作，唯一的问题是它的兼容性。目前它只能在最新的浏览器中工作，在Safari中根本无法工作。

我是否可以使用jQuery来创建一个替代方案？例如：获取对象的100％宽度-100px，并将结果动态设置为CSS宽度（这样它就具有响应性）

- sam

---

使用jQuery时，可以这样设置：$('#dataElement').css({'width':'calc(100% -100px)'}); - Sam Arul Raj T

Answer 1

如果你的浏览器不支持calc表达式，使用jQuery模拟并不难：

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

让jQuery处理相对计算比自己处理要容易得多。

- lonesomeday

---

http://tobiasahlin.com/blog/quick-guide-chaining-in-jquery/ - shareef

请添加 $(window).resize(function() { /* 把 jQuery 计算代码放在这里 */ });，这样它就会在窗口大小改变时自动计算宽度。 - Dexter Huinda

我知道。请看下面我的回答。 - odiszapc

这种方法存在一个小问题。当我改变页面的宽度时，#yourEl 的宽度不会改变，它是恒定的。 - Shafizadeh

如果其他人对格式很挑剔，那么等号和值之间不能有空格。所以 -= 100px 是不起作用的，必须是 -=100px。 - Gavin

Answer 2

我觉得这可能是另一种方式

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

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

- Selim Reza

Answer 3

100％-100px是相同的

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

使用jQuery：

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

类似的方法是使用jQuery调整大小插件

- odiszapc

---

如果项目是 position:absolute; top:0; left:0;，那么上面的示例是否有效？ - sam

刚刚在玩这个，你的js代码在第2行$(window)处出现错误： - sam

如果CSS示例是width:90%; margin-right:-100px;，它会起作用吗？ - sam

Answer 4

尝试使用 jQuery 的 animate() 方法，例如：

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

- Ajai

---

我正在尝试使用上面描述的calc函数与animate一起使用，但遇到了问题：$('#button-sidebar').animate({width: calc(50% + 20px)},400); - bhoward

我认为你不能使用jQuery动画化计算CSS变量。你可以在同一个操作中同时动画化'width', '100%'和'width', '-=100px'，它会实现你想要的效果。 - Nick Felker

Answer 5

如果您想在CSS文件中使用calc，请使用类似PolyCalc的polyfill。应该足够轻便，可以在移动浏览器上运行（例如iOS 6以下和Android 4.4以下手机）。

- Nux

Answer 6

虽然它只适用于宽度和高度，但在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));
}

- ShrekOverflow

---

它需要一个使用示例。 - Nowaker