Question

我想使用jquery

在我的css中为calc()做后备

CSS：

width: calc(100% - 90px);

所以我写了下面的代码，但似乎第二个css()没有运行。我认为有些事情是错的，但我不知道。

jQuery的：

var paxWidth = '-' + ($('.pax').width() + 10) + 'px';
console.log(paxWidth); // this return -90px
$('.datetime,.placeholder').css('width','100%').css('width', paxWidth);

Answer 1

当您使用css方法连续两次设置宽度时，第二个只会覆盖前一个。在您模仿100% - 90px宽度的情况下，您需要在px中实际计算此差异并应用结果。

现在，百分比宽度100%是相对于父容器计算的，这意味着对于100％的值，您需要执行以下操作：

var paxWidth = $('.pax').width() + 10;
$('.datetime, .placeholder').css('width', function() {
    var parentWidth = $(this).parent().width();
    return parentWidth - paxWidth;
});

演示： http://jsfiddle.net/02cxqpzq/

<强> UPD 即可。看一下重复的答案，我可以确认我的上述解决方案没什么意义，因为它可以像

一样简单

$('.datetime, .placeholder').css('width', '100%').css('width', '-=90px');

演示： http://jsfiddle.net/02cxqpzq/1/

jquery css在我的案例中不起作用

1 个答案: