使用JS单击时将div高度更改为子div的高度

Question

I have a div (divChatContainer) with a top div (divChatContainerTop) that have a "span" element inside it. 我有一个div（divChatContainer），其顶部有一个div（divChatContainerTop），其中具有“ span”元素。 I want the container div to be resized to the "divChatContainerTop" height when the "span" element is clicked (ie: minimize the chat window so only the "divChatContainerTop" appears). 我希望在单击“ span”元素时将容器div的大小调整为“ divChatContainerTop”的高度（即：最小化聊天窗口，以便仅出现“ divChatContainerTop”）。

HTML code: 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>

External .js file: 外部.js文件：

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

In debug i notice it's not entering the function. 在调试中，我注意到它没有进入功能。 Perhaps the syntax of adding the eventListener is wrong, or maybe the "span" element have other name (on MasterPage sometimes they have "ctl00_elementName"), but i guess it's not the case, as the container element is statically in HTML outside ContenPlaceHolder. 也许添加eventListener的语法是错误的，或者“ span”元素可能具有其他名称（在MasterPage上有时它们具有“ ctl00_elementName”），但是我猜不是这样，因为容器元素在ContenPlaceHolder之外的HTML中是静态的。

EDIT : The following code WORKS to minimize 编辑：以下代码可最大程度地减少工作量

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

But the following code DON'T do nothing: 但是下面的代码什么都不做：

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

So i am assuming i am not being able to get "divChatContainerTop" or the "span" height. 因此，我假设我无法获得“ divChatContainerTop”或“ span”高度。 Can't we get a screen height instead of height property? 我们不能获得屏幕高度而不是height属性吗？

Answer 1

It seems that I misunderstood the question last night. 昨晚我似乎误解了这个问题。 If you want to get the height of the div without setting the height property in the first place, you should try one of: 如果要在不首先设置height属性的情况下获取div的高度，则应尝试以下方法之一：

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

Updated jsfiddle , logs three values and when you click on the span, height will change. 更新了jsfiddle ，记录了三个值，当您单击跨度时，高度将发生变化。

Reference: 参考：

Answer 2

Simple! 简单！ you should have added your scripts at last(before closure body tag), becauase the dom need to find the elements you have referred in scripts,so it should have parsed before. 您应该最后添加您的脚本（在closure body标签之前），因为dom需要找到您在脚本中引用的元素，因此它应该已经解析过。 this will solve the problme of event not triggered but to get that chat like function you have to edit your code bit more EX 这将解决未触发事件的问题，但是要获得类似功能的聊天功能，您必须多编辑代码EX

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

Sample 样品

</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>

EDIT: 编辑：

to get the height of div you should use 要获得div的高度，您应该使用

document.getElementById('spanChatMinimize').clientHeight; document.getElementById（'spanChatMinimize'）。clientHeight;

or document.getElementById('spanChatMinimize').offsetHeight; 或document.getElementById（'spanChatMinimize'）。offsetHeight;或

this works! 这可行！

使用JS单击时将div高度更改为子div的高度

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-11-01 15:49:56

解决方案2
-1 2015-11-01 15:48:42

使用JS单击时将div高度更改为子div的高度

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-11-01 15:49:56

解决方案2 -1 2015-11-01 15:48:42

解决方案1
0 已采纳 2015-11-01 15:49:56

解决方案2
-1 2015-11-01 15:48:42