在Javascript中强制dom重新加载/调整大小 [英] Force dom reload/resize in Javascript

问题描述

我在应用程式中有一个侧栏，可以透过切换按钮隐藏/显示。它简单地在body上切换一个类，为内容区域添加一些边距，并隐藏/显示边栏。问题是，当切换时，内容区域不会调整其子内容的大小。一旦我调整浏览器的大小，内容区域调整以适应内容，但我需要它，以在切换后，不需要调整窗口大小这样做​​。有没有办法触发元素大小刷新或dom刷新来解决这个问题？使用Chrome 19.x。

I have a sidebar in my app that can be hidden/shown via a toggle button. It simply toggles a class on "body" that adds some margin left to the content area and hides/shows the sidebar. Trouble is that the content area isn't resizing its child content when this is toggled. Once I adjust the size of the browser, the content area adjusts to fit the content, but I need it to do this after the toggle without the need to resize the window. Is there a way to trigger an element size refresh or dom refresh to solve this issue? Using Chrome 19.x.

 $('#sidebar-toggle').click(function(event) {
   event.preventDefault();
   $('body').toggleClass('with-sidebar-left');
 });

编辑：似乎可能是Webkit问题。

Seems like it might be a Webkit issue. Works fine in Firefox.

编辑2：在以下位置设置简化版本：

Edit 2: Set up a simplified build at the following location:

https://dl.dropbox.com/ u / 189605 / misc / build-test / grid.html

你可以看到框是float：left，当你最小化边栏使用little箭头按钮，它应该调整右边，以便更多的盒子适合。在Webkit中，你必须调整浏览器的大小才能实现它有更多的空间。可在Firefox中使用。

You can see the boxes are float: left and when you minimize the sidebar using the little arrow button, it should adjust the right so more boxes will fit. In Webkit, you have to resize the browser for it to realize it's got more space. Works in Firefox.

推荐答案

我的答案在这里适用于您的情况。

快速演示： http://jsbin.com/amakex

它同时适用于Chrome和Safari（毫不奇怪，您的原始演示也无法在Safari中使用）。

It works in both Chrome and Safari (unsurprisingly, your original demo also didn't work in Safari).

这篇关于在Javascript中强制dom重新加载/调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！