css width: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处理相对计算要比自己动手更容易.

@odiszapc添加`$(window).resize(function(){/*将jquery calc代码放在这里*/});`这样它会在窗口调整大小时自动计算宽度. (10认同)
只是因为其他人都是关于格式的肛门,'='和值之间不能有空格.所以` - = 100px`不起作用,它必须是` - = 100px`. (2认同)

Answer 2

我认为这可能是另一种方式

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

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

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 resize插件