使用JS将div高度更改为子div的高度
我有一个div (divChatContainer)，其顶部div (divChatContainerTop)中有一个"span“元素。当单击"span“元素时，我希望容器div被调整为"divChatContainerTop”高度(即:最小化聊天窗口，只有"divChatContainerTop“出现)。
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之外的ContenPlaceHolder中使用的。
编辑：下面的代码可以最小化
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“或”跨度“的高度。我们不能用屏幕高度代替高度属性吗？
回答 2
Stack Overflow用户
发布于 2015-11-01 15:49:56
看来我昨晚误解了这个问题。如果首先要获得div的高度而不设置“高度”属性，则应尝试以下其中之一：
document.getElementById('divChatContainerTop').clientHeight
document.getElementById('divChatContainerTop').offsetHeight
document.getElementById('divChatContainerTop').scrollHeight更新的小提琴，记录三个值，当您单击span时，高度将发生变化。
参考资料：
Stack Overflow用户
发布于 2015-11-01 15:48:42
很简单！您应该最后添加脚本(在闭包正文标记之前)，因为dom需要查找脚本中引用的元素，所以应该在前面进行了解析。这将解决事件不触发的问题，但要获得类似于聊天的功能，您必须编辑更多的代码。
<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；
这行得通！
https://stackoverflow.com/questions/33463802
复制相似问题
腾讯云开发者
