1

我有以下代码：

<head>
    <style>
        #mainDiv {
            background-color: grey;
            position: absolute;
        }
        #one {
            height: 150px;
            width: 70px;
            bottom: 300px;
            right: 500px;
            background-color: green;
            position: absolute; 
        }
        #two {
            height: 200px;
            width: 200px;
            margin-top: 50px;
            margin-bottom: 20px;
            margin-left: 90px;
            margin-right: 5px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="mainDiv">
        <div id="one"></div>
        <div id="two"></div>
    </div>
</body>

我想调整#mainDiv的大小，使其包含其子项并考虑所有定位和边距属性（基本上#mainDiv 的灰色区域将围绕子项并直观地显示定位和边距空间）。

我知道它不能使用 CSS 动态完成。我如何在不使用 JQuery 的情况下使用纯 JavaScript 实现这样的功能？

注意：孩子的位置属性没有限制，它可以是任何一个，但“固定”。

代码需要支持所有主流浏览器+IE8+手机（android 2.3+4、iphone）。

谢谢！

4

3 回答 3

0

在您的情况下，由于某些逻辑原因，这是不可能的。当父母没有大小并且因此没有可用的正确位置时，如何为 id one 找到正确的位置。

如果您在 id 1 中使用 left 而不是 right，情况会变得更好。

一切顺利

试试这个

    <script>
    window.onload = function() {
        var elems, max_top, max_right;
        elems = mainDiv.getElementsByTagName( 'div' );
        for( i = 0; i < elems.length; i++ ) {
            elem = elems[ i ].offsetLeft + elems[ i ].offsetWidth + elems[ i ].style.marginLeft;
            max_right = ( max_right > elem ) ? max_right : elem;

            elem = elems[ i ].offsetTop + elems[ i ].offsetHeight + elems[ i ].style.marginBottom;
            max_top = ( max_top > elem ) ? max_top : elem;
        }
        console.log( 't: ' + max_top + ', r: ' + max_right );
        mainDiv.style.height = max_top;
        mainDiv.style.width = max_right;

    }
    </script>

该代码在获取利润方面存在一些问题。

我找到了一个很好的页面来解决这个问题。

http://www.quirksmode.org/dom/getstyles.html

于 2012-12-10T11:58:07.547 回答
0

我做了一些可能很复杂的事情，你可以在这里找到：http: //jsfiddle.net/YMmHz/1/

基本上我得到了所有可能的值：

var widthOne, widthTwo, heightOne, heightTwo;
var leftOne, leftTwo, rightOne, rightTwo, topOne, topTwo, botOne, botTwo;
var marginLeftOne, marginLeftTwo, marginRightOne, marginRightTwo, marginTopOne, marginTopTwo, marginBotOne, marginBotTwo;
var paddingLeftOne, paddingLeftTwo, paddingRightOne, paddingRightTwo, paddingTopOne, paddingTopTwo, paddingBotOne, paddingBotTwo;
var maxWidthOne, maxWidthTwo, maxHeightOne, maxHeightTwo;

通过不同的测试：

widthOne = $('#one').width();
widthTwo = $('#two').width();

(parseInt($('#one').css('left')))? leftOne = parseInt($('#one').css('left')):leftOne = 0;
(parseInt($('#two').css('left')))? leftTwo = parseInt($('#two').css('left')):leftTwo = 0;

然后像这样定义#mainDiv的大小：

(maxWidthOne>=maxWidthTwo)? $('#main_div').width(maxWidthOne):$('#main_div').width(maxWidthTwo);
(maxHeightOne>=maxHeightTwo)? $('#main_div').height(maxHeightOne):$('#main_div').height(maxHeightTwo);
于 2012-12-10T13:37:01.497 回答
0

对第二个 div 使用相对位置，因此 mainDiv 灰色区域将围绕您的子元素

#mainDiv {
        background-color: grey;
        position: absolute;
    }
    #one {
        height: 150px;
        width: 100px;
        bottom: 300px;
        right: 500px;
        background-color: yellow;
    }
    #two {
        height: 200px;
        width: 200px;
        margin-top: 50px;
        margin-bottom: 20px;
        margin-left: 90px;
        margin-right: 5px;
        background-color: blue;
        position: relative;
    }
于 2012-12-10T11:47:09.190 回答