javascript - 调整 DIV 中所有元素的大小和位置以匹配新尺寸

Question

在我的网站上，我有一个包含很多元素的 div。元素由 px 中的坐标而不是 % 定位。

div 的高度 = 1000 像素，宽度 = 1000 像素；

在按钮上单击我将 Div 调整为 500px X 500px；

有没有办法我也可以调整其中所有元素的大小，而不必遍历每个元素并弄清楚每个元素的新大小和位置应该是什么？而且我需要在不使用百分比的情况下做到这一点。

我只是在问这是否可能或寻找提示或提示来做到这一点。

谢谢

Answer 1

听起来您应该从相对测量开始:)

下面是一些关于如何使用 jQuery 实现“丑陋方式”的示例代码：

$('#container div') // your selector here
    .each(function () {
        var t = $(this);
        var p = t.position();
        t.css({
            left: ~~(p.left * .5),      // ~~ is for flooring
            top: ~~(p.top * .5),        // you could do x / 2 instead of * .5
            height: ~~(t.height() * .5),
            width: ~~(t.width() * .5)
        });
    });

另一种方法可能是使用容器的 CSS 选择器来为其中的 div 声明一些备用测量值和坐标。这是一个例子：

#container { ... }
#container div { position: absolute; }
#container .myDiv1 { left: 40px; top: 40px; height: 100px; width: 100px; }
#container:hover .myDiv1 { left: 20px; top: 20px; height: 50px; width: 50px; }