用js或jquery调整Div大小

div resizing with js or jquery

本文关键字：Div 大小 调整 jquery js      更新时间：2023-09-26

我正在尝试根据当前窗口/iframe的大小调整div的大小。

例如

，如果大小为1200我想调整div

的大小

如果窗口小于800如果winnow/iframe太小，我想禁用栏的右边部分。

我如何使用js或javascript做到这一点它可以有1到4个iframes列，并且可以在许多不同的屏幕分辨率。

感谢

我尝试了下面的媒体查询代码，但是当你有2个iframe与500 × 500每个或者我可以有一个iframe和窗口大小可以根据监视器/分辨率等调整大小。我注意到，如果我修东西…换掉的变化。

    @media screen and (min-width: 1200px) and (max-width: 1510px)  {
      #topbar {
    background-color: #E5EBF1;
        border: 0 solid red;
        font-size: 11px;
        height: 31px;
        padding: 0 0 0 2px;
        position: relative;
        width: 100%;
        z-index: 1111;
    }
    .objects-b {
      /*
      float: right;
      width: 64%;
      border: 0px solid green;
      margin: 0;
      padding: 7px 0 */
      display:none;
     }
     #topbar .hierarchialgroups-b {
        float: left;
      width: 240px;
      bordeR: 3px solid red;
    }
    .rest-b {
      /*
      padding: 0;
      margin: 0;
      border: 0px solid blue;
      width: 616px;
      align: right */
      display:none;
    }
    }
    @media screen and (min-width: 440px) and (max-width: 880px)  {
      #topbar {
    background-color: #E5EBF1;
        border: 0 solid red;
        font-size: 11px;
        height: 31px;
        padding: 0 0 0 2px;
        position: relative;
        width: 60%;
        z-index: 1111;
    }
    .objects-b {
      display:none;
     }
     #topbar .selectgroups-b {
        float: left;
      width: 39%;
      bordeR: 1px solid yellow;
    }
    .rest-b {
      display:none;
    }
    }
HTML BIT
    <div id="tbar" >
    <div class="hierarchialgroups-b"><strong>Showing:</strong><select
      id="groupselect">
      <option value="0" selected>...loading groups</option>
    </select></div>
    <div class="objects-b">
    <ul class="rest-b">
      <li><strong>Size Represents</strong>: #&nbsp;Objects</li>
      <li><strong>Color Represents</strong>: Group Impacts</li>
      <li><span class="color1">&nbsp;</span>Normal</li>
      <li><span class="color2">&nbsp;</span>Degraded</li>
      <li><span class="color3">&nbsp;</span>Critical</li>
    </ul>
    </div>

使用。resize()函数

$(window).resize(function() {
    var height=$(window).height();
    var width=$(window).width();
    $('#div').css({"width":width,"height":height});
});
下面是代码

使用jquery使用$('#id')来引用div，其中id是div的id，您应该能够使用window来检查窗口尺寸。innerWidth/window.innerHeight。根据宽度/高度，你应该能够通过添加css属性来修改div的尺寸

window.onresize = function() { // this will fire every time the browser is resized..
   var bWidth = window.innerWidth; // get the viewport width. 
   var el = document.getElementById("#div"); // get the div you want to work with
   if(bWidth <= 800) {
      // viewport is less than or equal to 800
   } else if(bWidth >= 1200) {
      // viewport is greater than or equal to 1200
   }
}

然后确保它在第一次运行时被触发…

 window.onload = function() {
    this.onresize();
 };
相关文章：