0

別の DIV (ソース) の clientWidth に基づいて、1 つの DIV (ターゲット) の幅を動的にサイズ変更しようとしています。

注: ソース DIV の CSS スタイルは width:auto; です。

1 番目の問題: 動作しません...それは私の構文か何かに違いない..?

2 番目の問題: ユーザーがブラウザー ウィンドウを変更すると、動的にサイズを変更する必要があります (ウィンドウのサイズ変更時にスクリプトを思い出してください)。どのように ？？？

Javascript:

<script>

// START RESIZE WIDTH SCRIPT
function resizetarget(){

var resizesource = document.getElementById('section');
var sourcewidth = resizesource.style.clientWidth;
var resizetarget = document.getElementById('collpilewrapper');
var targetwidth = resizetarget.style.clientWidth;

targetwidth = sourcewidth;

}

</script>

CSS:

.section{
    width:auto;
    max-height:75%;
    top:60px;
    bottom:60px;
    margin-bottom:60px;
    left:280px;
    right:0px;
    position:absolute;
    background-color:#FFF;
    white-space:nowrap;
    display:inline-block;
}
.section li{float:left; display: inline; }
.pane{
    overflow:auto;
    clear:left;
    position:relative;
    width:100%;
    height:100%;
    }

#collpilewrapper{
    min-width:900px;
    min-height:100%;
    float:left;
    background-color:#69C;
    display:table-column;
    }

HTML:

<!--start content-->

<div class="section">

<div id="pane-target" class="pane">

<ul class="elements" style="width:16000px">

<!--box 0 -->
<li>
<!-- START landing group -->

    <div id="collpilewrapper">

          <div id="collpile1">
          <img src="images/coll-missy-714x737.jpg" /></div>

          <div id="collpile2">
          <img src="images/coll-girls-602x476.jpg" /></div>

          <div id="collpile3">
          <img src="images/coll-toddler-421x447.jpg" /></div>

    </div>

<!-- END landing group -->

</li>

<!--box 1 -->
<li>
<!-- START missy group -->
<div id="adbox">
<img class="largead" src="images/storypic-na.jpg" />
</div>
<div id="adbox">
<img class="largead" src="images/videostill1.jpg" />
</div>
<!-- END missy group -->

</li>
</ul>     
</div>
</div>

<!--end content-->
4

1 に答える 1

0

jsfiddle

jQuery の方が使いやすいので、jQuery を使用しました。私が気づいたいくつかの問題があります。ID で要素をターゲットにしていましたが、セクションは ID ではなくクラスです。style.clientWidthグーグルで調べたところ、公式にはサポートされていません。IEが使っていたもののようです（正直なところ、私はそれについて何も知りません）。

jQuery

function resizeWidth(source, target){
    var sourcewidth = $(source).width();

    $(target).css({
        "width": sourcewidth
    });
}

$(window).resize(function() {
    resizeWidth("#section", "#collpilewrapper");
});

この中に配置したコードは、ウィンドウのサイズが変更されたときに実行されます。

$(window).resize(function() {

});

resizeWidth()自分で作った機能です。sourceaと aを取り込みますtarget。

width()要素の幅を提供します。

css()CSS を直接変更できます。

最後に、大きな青いボックスのサイズが変更されているように見えないことに気付くでしょう。これは、最小幅を 900px に設定したためです。また、イベントはブラウザのサイズを変更したときにのみ発生します。最初にページをロードしたときは何もしません。

于 2013-04-11T18:59:53.363 に答える