jquery调整大小后元素高度不更新

时间:2016-08-16 14:23:32

标签: javascript jquery html

在调整大小时,它不会更新高度。一旦负载设置了它的高度,尽管我更新了变量,它仍然不会更新。

如果我取出设置高度的线条,那么我的变量会更新,但是一旦设置了高度,它就不会做任何事情。

我哪里出错?

var hero_height = $('.hero-image').outerHeight();
console.log('heroHeight: ' + hero_height);

$(document).ready(function() {
    $(window).load(function() {

        $('.hero-image').css('height', hero_height );

    });

    $(window).resize(function() {

        if (hero_height !== $('.hero-image').outerHeight()) {
            $('.hero-image').css('height', hero_height );
        };

        hero_height = $('.hero-image').outerHeight();
        console.log('heroHeight: ' + hero_height);

    });
});

这是一个JS小提琴 https://jsfiddle.net/5c1za6xa/

2 个答案:

答案 0 :(得分:1)

在窗口调整大小功能中包含var hero_height = $('.hero-image').outerHeight();

$(window).resize(function() {
    var hero_height = $('.hero-image').outerHeight();
    if (hero_height !== $('.hero-image').outerHeight()) {
        $('.hero-image').css('height', hero_height );
    };

    hero_height = $('.hero-image').outerHeight();
    console.log('heroHeight: ' + hero_height);
});

答案 1 :(得分:0)

你过分思考这个!你根本不需要jQuery,只需要CSS media queries

这是一个例子

nav {
   display: block;
}

@media screen and (max-width: 480px) {
  nav {
    display: none;
  }
}

这将隐藏移动设备上的导航栏(或技术上,屏幕高度小于480px的任何内容)。您可以显然更改最大宽度和样式以满足您的需求。由于多种原因,这远远优于jQuery

  1. 这样更容易阅读
  2. 它不需要javascript,因此它适用于不支持javascript的用户/设备(这些日子几乎没有人授权)。但是,不使用javascript也会极大地加快页面加载时间。
  3. 一般情况下(自CSS3发布以来),您几乎不需要使用javascript(或jQuery)来调整样式。因此,既然您正在尝试更改页面的样式/外观,则应使用CSS。将JS留给网页的动态功能,而不是样式。