如何在javascript运行后刷新CSS以调整div高度 [英] How do I refresh CSS after javascript runs to adjust div height

问题描述

我使用以下脚本来调整页面上容器div相对于浏览器窗口高度的高度

I'm using the following script to adjust the height of a container div on my page relative to the browser window's height

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元素修复自己。如果我进入firebug，而内部的div是扭曲的，我取消检查任何甚至不相关的元素CSS属性，内部的div修复自己。

The script works fine to scale the #slider div's height relative to the viewport's height. The problem is if I resize the browser window the inside div elements dimensions get distorted. However if I refresh the browser the inside div elements fix themselves. Also if I go into firebug while the inside div's are distorted and I un-check ANY even unrelated elements CSS properties, the inside div's fix themselves.

解决方案是javascript以某种方式刷新CSS后浏览器重新调整大小？如果是这样，你怎么做的？或者我应该绑定在受影响的内部div元素的维度到开始的功能？我也试图这样做没有运气。

Would the solution be for javascript to somehow refresh CSS after a browser re-size? If so how do you do that? Or should I be tying in the effected inside div element's dimensions to the function to begin with? I have also tried to do that with no luck.

事实上，浏览器或CSS刷新似乎解决了这个问题，使我倾向于第一个解决方案，如果可能的话。
感谢。

The fact that a browser or CSS refresh seems to fix the problem makes me lean towards the first solution if it's possible. Thanks.

推荐答案

首先，我建议你 。一个简单的学习版本。这里有一个 jsFiddle 作为例子，如何做一个没有所有其他网站的例子东西在路上。 CSS被读取一次。 js正在写入内联CSS。所以你不想刷新CSS。你想要写新的内联CSS在js已经写的东西。

First off, I suggest you make a text space... a simplified version to learn with. Here is a jsFiddle as an example how you can make an example that doesn't have all the other site stuff in the way. CSS is read once. the js is writing inline CSS. So you don't want to refresh the CSS. You want to write new inline CSS over the stuff the js already wrote.

这是一个函数的例子。下面是如何调用它的DOM准备好，然后，当窗口调整大小。请记住，它将运行该函数许多次，而你调整大小 - 所以这不是伟大的所有方案。此外， - 虽然值得称赞，你希望它调整大小（我做同样）没有人会调整他们的浏览器的大小...所以选择你的战斗。

Here is an example of a function. Below is how you call it on DOM ready and then, also when the window is resized. Keep in mind that it is going to run that function many many many times while you resize - so this isn't great for all scenarios. Also, - while it's commendable that you want it to resize(I do the same) no one else is going to resize their browser... So pick your battles.

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);

这篇关于如何在javascript运行后刷新CSS以调整div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！