Question

我有一个jquery。

$(window).on('load resize', function() { 
  var dm3Width = $('.dm3').width() 
  $('.dm1').width(dm3Width); 
});

在此演示：https://jsfiddle.net/veusr0xn/

根据dm1的宽度更改dm3。但它只在我调整窗口大小后运行。页面加载后如何运行？

非常感谢。

Answer 1

在DirectCast范围下定义您的查询，这样当文档加载时您的查询将自动生效

CType

Answer 2

不需要脚本来处理维度。 CSS已经足够成熟，可以处理几乎所有的表示方面，宽度是一个相当基本的规则来设置。

我建议你将两个div放在容器中并将其宽度设置为200px，然后将@media规则添加到它中，而不是在Javascript中处理它（非常低效）。您将拥有完全相同的灵活性，但不会受到脚本化外观的支配。

<强> HTML

<div class="dm">
  <div class="dm3">
    DM3
  </div>

  <div class="dm1">
    DM1
  </div>
</div>

<强> CSS

.dm { width: 200px; }
.dm3 { background-color: blue; }
.dm1 { background-color: breen; }

@media only screen and (max-width: 400px) {
  .dm {
    width: 400px;
  }
}

使用此FIDDLE查看此操作。

Answer 3

试试这个

＆＃13;

$(window).on('resize',function() {
    var dm3Width = $('.dm3').width() // Get dm3 width
    $('.dm1').width(dm3Width); // Make dm1 width match dm3 width
});
$(document).ready(function() {
    $(window).trigger('resize');
});

＆＃13;

.dm3 {
  width: 200px;
  background: blue;
}

.dm1 {
  background: green;
  width: 100px;
}

@media only screen and (max-width: 400px) {
  .dm3 {
    width: 400px;
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dm3">
  DM3
</div>


<div class="dm1">
  DM1
</div>

＆＃13;

页面加载后立即启动Jquery

3 个答案: