Как обновить CSS после запуска JavaScript для настройки высоты div

0

Я использую следующий скрипт для настройки высоты контейнера div на моей странице относительно высоты окна браузера

function thirty_pc() {
var height = $(window).height();
var thirtypc = (50 * height) / 100;
thirtypc = parseInt(thirtypc) + 'px';
var thirtypc2 = thirtypc * 2;
$("#slider").css('height',thirtypc);

}

$(document).ready(function() {
thirty_pc();
$(window).bind('resize', thirty_pc);
});

Скрипт отлично работает, чтобы увеличить высоту div #slider относительно высоты окна просмотра. Проблема в том, что если я изменил размер окна браузера, размеры внутренних элементов div будут искажены. Однако, если я обновляю браузер, внутренние элементы div фиксируют себя. Также, если я пойду в firebug, в то время как внутренний div будет искажен, и я проверю ЛЮБЫЕ, даже несвязанные элементы CSS-свойства, внутреннее div фиксирует себя.

Будет ли решение для javascript каким-то образом обновлять CSS после изменения размера браузера? Если да, то как вы это делаете? Или я должен связывать измеренные размеры элементов div с функцией для начала? Я также пытался сделать это без везения.

Тот факт, что браузер или обновление CSS, похоже, устраняет проблему, заставляет меня наклониться к первому решению, если это возможно. Благодарю.

  • 0
    Можете ли вы дать нам ссылку или JSFiddle ? Нам действительно нужно увидеть всю страницу.
Теги:

1 ответ

0

Во-первых, я предлагаю вам сделать текстовое пространство... упрощенной версией для изучения. Вот пример jsFiddle в качестве примера того, как вы можете сделать пример, который не содержит всех других материалов сайта. CSS читается один раз. js пишет встроенный CSS. Поэтому вы не хотите обновлять CSS. Вы хотите написать новый встроенный CSS над материалом, который уже написал js.

Вот пример функции. Ниже вы узнаете, как вы назовете его на DOM, а затем, когда изменяется размер окна. Имейте в виду, что он будет запускать эту функцию много раз, пока вы изменяете размер, поэтому это не подходит для всех сценариев. Кроме того, - хотя похвально, что вы хотите изменить его размер (я делаю то же самое), никто другой не изменит размер своего браузера... Поэтому выбирайте свои битвы.

var your_functions_name = function() {
    var windowHeight = $(window).height();
    $('.box').css('height', windowHeight/2);
};

// run on document ready
$(document).ready(your_functions_name);

// run on window resize
$(window).resize(your_functions_name);
  • 0
    Хорошо, спасибо, я постараюсь сделать jsfiddle для этого. Несмотря на то, что я понимаю, что javascript пишет inline css, я до сих пор не понимаю, почему удаление случайного щелчка по значению css в firebug на любом элементе на странице немедленно решает мою проблему. Не могу ли я заставить браузер делать то, что происходит, когда вы делаете случайное изменение в firebug. Должно быть, что-то на странице освежает что-то.
  • 0
    Также я не до конца понимаю, что делать с двумя разными примерами, которые вы упомянули. Я думаю, что прямо сейчас функция вызывается в готовом документе, потому что она работает, когда браузер загружен, и продолжает работать, когда она масштабируется. Однако проблема возникает только при изменении размера
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню