將div高度更改爲div div的高度點擊使用JS

我有一個div（divChatContainer），它有一個頂部div（divChatContainerTop），裏面有一個「span」元素。我想要在單擊「span」元素時將容器div的大小調整爲「divChatContainerTop」高度（即：最小化聊天窗口，以便只顯示「divChatContainerTop」）。將div高度更改爲div div的高度點擊使用JS

HTML代碼：

<div id="divChatContainer" runat="server" style="overflow-y: scroll; box-sizing: border-box; word-wrap: break-word; width: 20%; max-height: 35%; position: fixed; right: 0px; bottom: 0%; box-sizing: border-box; background-color: #EBECEF; border: solid #3A5896; border-width: 1px 0px 0px 1px; border-radius: 1px;"> 
    <div id="divChatContainerTop" style="text-align: right; box-sizing: border-box; width: 100%; padding: 3px;"> 
       <span style="float: left; box-sizing:border-box;width:50%;overflow:hidden;">Left</span><span id="spanChatMinimize" style="float: right">X</span> 
      </div> 
</div>

外部.js文件：

document.getElementById('spanChatMinimize').addEventListener('click', function() { 
    document.getElementById('divChatContainer').style.height = document.getElementById('divChatContainerTop').style.height + 'px'; 
});

在調試我注意到它沒有進入功能。也許添加eventListener的語法是錯誤的，或者「span」元素有其他名稱（在MasterPage上有時它們有「ctl00_elementName」），但我想不是這種情況，因爲容器元素靜態地位於ContenPlaceHolder外部的HTML中。

編輯：下面的代碼工作，以儘量減少

document.getElementById('spanChatMinimize').addEventListener('click', function() { 
    document.getElementById('divChatContainer').style.height = 10px; 
});

但下面的代碼不做什麼：

document.getElementById('spanChatMinimize').addEventListener('click', function() { 
    document.getElementById('divChatContainer').style.height = document.getElementById('spanChatMinimize').style.height + 'px'; 
});

所以我假設我沒有能夠得到「divChatContainerTop」或「跨度」高度。我們不能獲得屏幕高度而不是高度屬性？

來源

2015-11-01 Mr Billy

昨晚我似乎誤解了這個問題。如果你想獲得股利的高度，而不會首先設置高度財產，你應該嘗試之一：

document.getElementById('divChatContainerTop').clientHeight 
document.getElementById('divChatContainerTop').offsetHeight 
document.getElementById('divChatContainerTop').scrollHeight

Updated jsfiddle，記錄三個值，當你點擊跨度，高度將更改。

參考：

來源

2015-11-01 15:49:56 iplus26

divChatContainer裏面有更多的東西，它的高度並不僅僅來自「span」元素。事情是，如果我設置「divChatContainer」「style.height」爲「10px」例如，仍然不起作用。點擊事件沒有關聯到「span」點擊。在調試中，它不會進入功能（中間）行。我檢查了所有元素，並創建了正確的名稱（做了一個提醒所有元素的ID的小函數）。 –

@MrBilly addEventListener的作品。如果您點擊跨度，Console.log將起作用。 – iplus26

@MrBilly看到jsfiddle的例子。當您點擊跨度時Console.log起作用 – iplus26

-1

簡單！你應該在最後添加你的腳本（在關閉body標籤之前），因爲dom需要找到你在腳本中引用的元素，所以它應該先解析過。這將解決未觸發，但事件的problme吃出聊天之類的函數，你必須編輯你的代碼有點 EX

<html> 
<body> 
<div> 
etc etc 
<div> 
<script> 
// your script or external file 
</script> 
</body> 
</html>

樣品

</head> 
<body> 
<div id="divChatContainer" runat="server" style="overflow-y: scroll; box-sizing: border-box; word-wrap: break-word; width: 

20%; max-height: 35%; position: fixed; right: 0px; bottom: 0%; box-sizing: border-box; background-color: #EBECEF; border: 

solid #3A5896; border-width: 1px 0px 0px 1px; border-radius: 1px;"> 
    <div id="divChatContainerTop" style="text-align: right; box-sizing: border-box; width: 100%; padding: 3px;"> 
       <span style="float: left; box-sizing:border-box;width:50%;overflow:hidden;">Left</span><span 

id="spanChatMinimize" style="float: right">X</span> 
      </div> 
</div> 
<script> 
document.getElementById("spanChatMinimize").addEventListener('click', function() { 
alert('hi'); 
    document.getElementById('divChatContainer').style.height = document.getElementById('divChatContainerTop').style.height 

+ 'px'; 
}); 
</script> 
</body> 
</html>

編輯：

得到你應該使用的div的高度

document.getEleme ntById（ 'spanChatMinimize'）clientHeight。

或 document.getElementById（'spanChatMinimize'）。offsetHeight;

這個工程！

來源

2015-11-01 15:48:42

外部js文件被之前引用。 –

和所有的標籤之後呢？像我的樣品？ –

是的。另外，事件監聽器沒有綁定到span元素，因爲我需要。 –

將div高度更改爲div div的高度點擊使用JS

回答

相關問題