问使用JS将div高度更改为子div的高度
EN

Stack Overflow用户

提问于 2015-11-01 07:22:51

回答 2查看 1.5K关注 0票数 2

我有一个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“或”跨度“的高度。我们不能用屏幕高度代替高度属性吗？

javascript

html

css

运维排障定位快人一步

一站式日志服务平台---日志服务 CLS，智能化配置、开箱即用，协助解决业务运维、服务监控、用户行为分析、日志审计等场景诉求。

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-11-01 07:49:56

看来我昨晚误解了这个问题。如果首先要获得div的高度而不设置“高度”属性，则应尝试以下其中之一：

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

更新的小提琴，记录三个值，当您单击span时，高度将发生变化。

参考资料：

票数 0

Stack Overflow用户

发布于 2015-11-01 07: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>