javascript - .css() jquery 无法正常工作

Question

我试图将窗口的高度应用于特定 div 的最大高度。

$(document).ready(function(){
        console.log('Initial Window height:', $(window).height());
        $('.wordboard').css({ "max-height": ($(window).height()-150) + 'px' });
        //console.log($('.wordboard').css({"max-height": ($(window).height() - 150) + 'px'}));


        console.log("Initial max height of $('.wordboard'): ", $('.wordboard').css("max-height"));
        $(window).resize(function(){
            $('.wordboard').css({ "max-height": ($('body').height()-150) + 'px' });
            console.log("$('.wordboard').css('max-height')",$('.wordboard').css('max-height'));
        });

    });

但是，我的网站已加载:未应用最大高度。控制台中的结果是加载网站时:

Initial Window height: 550
script.js:28 Initial max height of $('.wordboard'):  undefined
(After i resize the window, the effect is now apply. However, I want to apply as soon as the window is loaded)

script.js:31 $('.wordboard').css('max-height') 718px
script.js:31 $('.wordboard').css('max-height') 723px
script.js:31 $('.wordboard').css('max-height') 728px
script.js:31 $('.wordboard').css('max-height') 733px

Answer 1

想到的唯一解决方案是，当您在文档就绪伪事件上调用代码段时，您的元素 .wordboard 不存在于 DOM 中。您肯定(或插件)动态添加它。

编辑:检查一下:

$(function(){console.log($(".wordboard").length);});

如果显示 0，您就知道问题出在哪里。