javascript运行后如何刷新CSS以调整div高度

Posted 2023-03-06

【中文标题】javascript运行后如何刷新CSS以调整div高度

【英文标题】：How do I refresh CSS after javascript runs to adjust div height

【发布时间】：2014-06-01 02:49:23

【问题描述】：

我正在使用以下脚本来调整页面上容器 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);
);

脚本可以很好地缩放#slider div 相对于视口高度的高度。问题是如果我调整浏览器窗口的大小，内部 div 元素的尺寸会失真。但是，如果我刷新浏览器，内部 div 元素会自行修复。此外，如果我在内部 div 扭曲的情况下进入 firebug，并且我取消检查任何甚至不相关的元素 CSS 属性，内部 div 会自行修复。

解决方案是让 javascript 在浏览器重新调整大小后以某种方式刷新 CSS 吗？如果是这样，你怎么做？或者我应该将受影响的内部 div 元素的尺寸与函数联系起来？我也尝试过这样做，但没有运气。

浏览器或 CSS 刷新似乎可以解决问题的事实使我倾向于在可能的情况下使用第一个解决方案。 谢谢。

【问题讨论】：

你能给我们一个链接或JSFiddle吗？我们真的需要看到整个页面。

【参考方案1】：

首先，我建议你制作一个文本空间...一个简化的版本来学习。这是一个jsFiddle 作为示例，您可以如何制作一个没有所有其他网站内容的示例。 CSS 被读取一次。 js正在编写内联CSS。所以你不想刷新 CSS。您想在 js 已经编写的内容上编写新的内联 CSS。

这是一个函数的例子。下面是您如何在 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);

【讨论】：

好的，谢谢，我会尝试为此制作一个 jsfiddle。即使我知道 javascript 正在编写内联 css，但我仍然不明白为什么在页面上的任何元素上取消单击 firebug 中的随机 css 值会立即解决我的问题。当您在萤火虫中进行随机更改时，我不能强制浏览器执行任何操作吗？它一定是在某处刷新页面上的“某物”。

另外，我不完全理解如何处理您提到的 2 个不同实例。我虽然现在该函数正在文档就绪下调用，因为它在加载浏览器时工作并且在重新调整大小时继续工作。但是，只有在调整大小时才会出现问题

其实我只是想通了...我不得不添加行“$(".slideimg").css('height',thirtypc);"到函数结束。 .slideimg 是容器 div 内的 div。当通过js函数调整容器div的高度时，内部div仍然认为外部div的高度是页面加载时的高度，它们不会动态调整，只有在浏览器加载时才会调整。因此，通过添加该行，内部 div 高度调整包含在函数中