Question

我有一个包含50个其他元素的div。我希望父div和它的50个子div一次调整大小。

例如，当调用函数resize（）时，＆＃34;＃itemcontainer＆＃34;并为它的子宽度分配了一个新的宽度，120％。

我的divs：

<div id="itemcontainer">
    <div id="item1"></div>
    <div id="item2"></div>
    <div id="item3"></div>
    <div id="item4"></div>
    <div id="item5"></div>
    <div id="item6"></div>
    and so on till item 50
</div>

提前致谢

Answer 1

这样的东西？

var container = document.getElementById("itemcontainer");
var boxes = container.getElementsByTagName("div");

function resize() {
    for (var i = 0; i < boxes.length; i++) {
        boxes[i].style.width = "120%";
    }
}

FIDDLE

Answer 2

使用CSS3 transform：

transform: scale(1.2);

Answer 3

这应该这样做。单击该按钮将宽度从当前宽度（50％）更改为参数宽度（75％）。

<!DOCTYPE html>
<html>
<head>
    <title>Resize child divs</title>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <style>
        #itemcontainer > div {
            width: 50%;
        }
    </style>
    <script>
        function resize(size) {
            $('#itemcontainer > div').css('width', size+'%');
        }
    </script>
</head>
<body>
    <div id="itemcontainer">
        <div id="item1" style="background-color: green;">
        one
        </div>
        <div id="item2" style="background-color: red;">
        two
        </div>
        <div id="item3" style="background-color: yellow;">
        three
        </div>
        <div id="item4" style="background-color: purple;">
        four
        </div>
        <div id="item5" style="background-color: orange;">
        five
        </div>
        <div id="item6" style="background-color: blue;">
        six
        </div>
    </div>
    <button onclick="resize(75);" type="button">Resize</button>
</body>
</html>

请注意，我给了它们颜色，因此更容易看出它们目前的尺寸。此外，可以很容易地使用调整大小（120）来获得你想要的大小，但是请记住，如果你的容器有一个固定的宽度，那么这最终会溢出。

调整div及其所有子项的大小

3 个答案: