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

あなたの場合、いくつかの論理的な理由のためにそれは不可能です。親にサイズがなく、したがって使用可能な正しい位置がない場合、どのようにしてid1の正しい位置を見つけることができますか。

id 1に右ではなく左を使用している場合、状況は良くなります。

ではごきげんよう

これを試してみてください

    <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

mainDiv の灰色の領域が子要素を囲むように、2 番目の div に相対的な位置を使用します。

#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 に答える
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 に答える