Question

我有一个div（divChatContainer），顶部div（divChatContainerTop）里面有一个“span”元素。我希望在单击“span”元素时将容器div的大小调整为“divChatContainerTop”高度（即：最小化聊天窗口，只显示“divChatContainerTop”）。

HTML code：

<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中。

修改：以下代码WORKS以最小化

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”或“span”高度。我们不能得到屏幕高度而不是高度属性吗？

Answer 1

我似乎昨晚误解了这个问题。如果你想在不首先设置 height 属性的情况下获得div的高度，你应该尝试以下方法之一：

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

Updated jsfiddle，记录三个值，当您点击跨度时，高度会发生变化。

参考：

Answer 2

简单！你应该最后添加你的脚本（在关闭body标签之前），因为dom需要找到你在脚本中引用的元素，所以它应该在之前解析过。这将解决未触发的事件的问题，但是为了获得聊天功能，您必须更多地编辑代码 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.getElementById（ 'spanChatMinimize'）clientHeight;

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

这有效！

单击JS，将div高度更改为子div的高度

2 个答案: