Question

我试图修改我的body元素的css类。

在修改课程之前，我会检查我的内容的滚动宽度：

$(window.document.body).prop('scrollWidth');  // 800px

现在我修改css类并再次检查滚动宽度：

$(window.document.body).prop('class', someCssClassName);
$(window.document.body).prop('scrollWidth');  // still reports 800px

我知道在此特定更改后滚动宽度不应为800px。我启动一个计时器并继续打印滚动宽度，几毫秒后我看到它变为600px。

所以我似乎无法立即获得更新的内容宽度（或者我误解了正在发生的事情）。

有没有办法在重新流程完成时收到通知，以便我可以获得更新的宽度？

如果可能的话，我不想设置计时器并继续检查。

我在Android WebView ..浏览器中尝试这个...所以，如果我在桌面浏览器中尝试，我不确定这种行为是否会相同。

谢谢

Answer 1

回答这个问题：访问scrollWidth属性会自动刷新任何样式更改（强制重排），然后返回计算值。这是同步发生的，因此您无需“等待”重排完成 - JS将在回流发生时冻结，然后返回正确的scrollWidth值。

您实际上在scrollWidth实施中遇到了关于body元素的非常具体的Blink / WebKit错误。

我通过删除一些不必要的jQuery抽象（fiddle）来简化你的代码：

document.body.className = 'w600px';
console.log(
    document.body.scrollWidth, // Firefox: 600, Chrome: viewport width
    $(document.body).width()   // 600 in both browsers
);

.w600px {
    width: 600px;
}

来自CSSOM element.scrollWidth spec：

3。如果元素是HTML body元素，则Document处于怪异模式，元素没有关联的滚动框，返回max（视口滚动区域宽度，视口宽度）。

Chrome似乎没有检查文档是否处于Quirks模式并且返回视口（滚动）宽度而与文档模式无关。

在这些情况下，您应该打开Chromium issue。

变通方法

这实际上取决于您的使用案例。 $(document.body).width()通常很好，除非内容溢出body元素的宽度。

或者，将所有页面内容包装在div内，并使用它来应用该类并从中检索scrollWidth。

Answer 2

尝试

 function getprop( el, prop ) {
      var props = window.getComputedStyle (
      $(el).get(0)).getPropertyValue(prop);
      return String(props);
    };
console.log(getprop("body", "width"))

http://jsfiddle.net/guest271314/6uKH6/5/

如何在css更改后获取更新的内容宽度？

2 个答案:

变通方法