Question

有人可以给我一个建议：

示例：我有

<div id="breadCrumb" style="width:80%"></div>

我不想将此width更改为1oo%并在width

上的px中获取click

$('#menu_toggle').on('click', function() {
    var cache = $('#breadCrumb');

    cache.css('width', "100%").promise().done(function(){   
        console.log(cache.width());
    });
});

但我仍然得到80%值。

如果我再次点击，那么我只会获得像素

中的100%值

我们的想法是等到css被应用并在

之后获得新的width

有人有什么想法吗？

谢谢你的帮助！

Answer 1

css立即开始工作，简直就是

cache.css('width', "100%");
console.log("breadCrumb width: " + cache.width());

应该可行，并且在Chrome和Firefox上禁止你没有向我们展示的内容：

$('#menu_toggle').on('click', function() {
    var cache = $('#breadCrumb');

    cache.css('width', "100%");
    console.log("breadCrumb width: " + cache.width());
    console.log("body width: " + $(document.body).width());
});

#breadCrumb {
  border-bottom: 2px solid blue;
}

<div id="breadCrumb" style="width:80%"></div>
<input id="menu_toggle" type="button" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

但是如果你需要给浏览器一点时间来应用更改，你可以使用setTimeout来做到这一点：

$('#menu_toggle').on('click', function() {
    var cache = $('#breadCrumb');

    cache.css('width', "100%");
    setTimeout(function() {
      console.log("breadCrumb width: " + cache.width());
      console.log("body width: " + $(document.body).width());
    }, 50);
});

#breadCrumb {
  border-bottom: 2px solid blue;
}

<div id="breadCrumb" style="width:80%"></div>
<input id="menu_toggle" type="button" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

您应该使用setTimeout()来应用您的css，然后在代码中将其用作

$(document).ready(function(){
    var cache = $('#breadCrumb');
    alert(cache.width());
    cache.css('width', "100%")
    setTimeout(function(){
        alert(cache.width());
    },500)

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="breadCrumb" style="width:80%"></div>

jQuery css承诺完成了

2 个答案: