當另一個CSS值發生變化時，如何更改CSS值？

我有結構化這樣的div：當另一個CSS值發生變化時，如何更改CSS值？

<div id='head'> 
    <div class='graphData'> 
     <table>...</table> 
    </div> 
    <div class='graph'>...</div> 
</div>

編輯：

對不起，我忘了結構的幾個重要部分。

head,graphData和都將它們的min-heights設置爲300px。

我的問題是如何更改head和graph's最小高度匹配graphData's最小高度時graphData's最小高度增加或減少？任何方式來檢測通過jQuery或JavaScript的CSS樣式更改？

graphData的高度因我的數據庫中動態生成的行而發生變化。

來源

2012-07-08 Ron

CSS或jQuery沒有內置的方式來檢測這種性質的變化。您可能認爲要做的是每隔一段時間檢查元素的高度，並將它們與最後一次已知值進行比較。如果有差異，那意味着高度已經改變。

var oldHeight = $("#graph").height(); 

var heightChangeTimer = setInterval(function(){ 
    var newHeight = $("#graph").height(); 
    if (newHeight != oldHeight){ 
    oldHeight = newHeight; 
    // do some actions on height change... 
    } 
},100);

現在，我已經將間隔設置爲每100毫秒，但你也可以自行調整值，以滿足您的需求 - 也許使它略小IE。更頻繁地運行檢查...

來源

2012-07-08 10:22:14 Lix

嗯，對的setInterval解決方案不是一個巨大的風扇，雖然這肯定會工作。 – Stegrex 2012-07-08 10:28:24

@ste - 這完全取決於內容多長時間更改一次大小。這**是更多的「蠻力」解決方案，我承認。 – Lix 2012-07-08 10:33:00

是的，這是更強大的力量，但它絕對是一個好開始。當然，從原始問題中很難看出整個頁面需求的意義，因此很難說出哪個解決方案是「最好的」。也許我只是傾向於在一個頁面上有很多JS定時器的可能性。 – Stegrex 2012-07-08 10:37:53

您可以並排設置，或者您可以將min-height: inherit設置爲內部div。

來源

2012-07-08 10:23:49 pozs

在CSS中沒有真正的事件系統（當然，jQuery有一個）。這取決於你的圖形元素的變化方式。如果當用戶與任何元素相互作用的高度是變化的，你可以使用jQuery的點擊功能：

$("#myElement").click(function() { 
    $("#head").addClass("higher"); // change height or something 
});

來源

2012-07-08 10:24:58 Chris

啊哈！關於沒有事件系統的CSS，這非常好。好帖子和很好的解決方案。 – Stegrex 2012-07-08 10:26:52

@chr - 在（'click'）語法上使用更新的jQuery 1.7+'來綁定事件處理程序... – Lix 2012-07-08 10:31:25

沒有用戶交互。我更新了我的問題。 :) – Ron 2012-07-08 10:39:34

jQuery: How to listen for DOM changes?

你可能會想讀了這一個。

基本上，我認爲你想要做的就是將一個事件監聽器綁定到圖形的div上（文檔將等待並監聽發生在它上面的任何事件）。它需要監聽的事件是CSS中的更改（可能是DOMSubtreeModified事件，但我會查找樣式屬性修改事件，不確定是否存在該事件）。

當圖形發生變化時，處理head div。

來源

2012-07-08 10:25:22 Stegrex

你可以使用這個插件http://benalman.com/projects/jquery-resize-plugin/

來源

2012-07-08 10:29:17 HADEV

雖然這可能在理論上回答這個問題，[這將是更可取的]（http://meta.stackexchange.com/q/ 8259）在這裏包括答案的重要部分，並提供參考鏈接。我們希望爲本網站帶來精彩內容**，而不是向其他地方的用戶發送答案:) – Lix 2012-07-08 10:29:35

當另一個CSS值發生變化時，如何更改CSS值？

回答

相關問題