0

我正在尝试根据另一个（源）的 clientWidth 动态调整一个 DIV（目标）的宽度。

注意：源DIV的CSS Style是width:auto；

第一个问题：它不起作用......它一定是我的语法或什么......？

第二个问题：它需要随着用户更改浏览器窗口而动态调整大小（在窗口调整大小时调用脚本）。如何 ？？？

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，因为我发现它更容易使用。我注意到了几个问题。您按 ID 定位元素，但 section 是一个类，而不是一个 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()是我自己做的一个功能。它接受 asource和 a target。

width()会给你一个元素的宽度。

css()允许我们直接更改 CSS。

最后，您会注意到蓝色大框看起来并没有重新调整大小。那是因为您设置的最小宽度为 900 像素。此外，该事件只会在您重新调整浏览器大小时触发。当您第一次加载页面时，它不会做任何事情。

于 2013-04-11T18:59:53.363 回答