.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. Вы, конечно, (или плагин) добавили его динамически.

EDIT: просто проверить его:

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

Если отображение 0, вы знаете, откуда исходит от вашего вопроса.

Answer 2

Это правильный путь.

$('.wordboard').css('max-height',"723px"); 

Answer 3

У вас есть код внутри события, событие resize.

Выполняется только при срабатывании этого события. (Как проверено)

Теперь у вас есть 2 варианта:

1. триггера resize событие:
   $(window).resize(function(){ [...] }).resize();
   Да, просто добавьте .resize() после объявления события. Это так просто!
2. Дубликат код:
   $(window).resize(function(){ [...] }); $('.wordboard').css({ "max-height": ($('body').height()-150) + 'px' });