Javascript 使用JS单击将div height更改为child div的高度_Javascript_Html_Css

Javascript 使用JS单击将div height更改为child div的高度

javascript html css

Javascript 使用JS单击将div height更改为child div的高度,javascript,html,css,Javascript,Html,Css,我有一个div divChatContainer，上面有一个div divChatContainerTop，里面有一个span元素。我希望在单击span元素时将容器div调整为divChatContainerTop高度，即：最小化聊天窗口，以便只显示divChatContainerTop </head> <body> <div id="divChatContainer" runat="server" style="overflow-y: scroll; box-si

我有一个div divChatContainer，上面有一个div divChatContainerTop，里面有一个span元素。我希望在单击span元素时将容器div调整为divChatContainerTop高度，即：最小化聊天窗口，以便只显示divChatContainerTop

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

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>

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

在debug中，我注意到它没有进入函数。也许添加eventListener的语法是错误的，或者span元素在母版页上有其他名称，有时它们有ctl00_elementName，但我想情况并非如此，因为container元素在ContenPlaceHolder之外的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>

编辑：下面的代码用于最小化

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

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

但以下代码不起任何作用：

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

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

所以我假设我不能得到divChatContainerTop或跨度高度。我们不能用屏幕高度代替高度属性吗？

简单！您应该在lastbefore closure body标记之前添加脚本，因为dom需要找到您在脚本中引用的元素，所以它应该在之前解析过。这将解决事件未触发的问题，但要获得类似聊天的功能，您必须进一步编辑代码

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

前

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

样品

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

编辑：

</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的高度，应使用

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

document.getElementById'spanChatMinimize'.clientHeight

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

或 document.getElementById'spanChatMinimize'.offsetHeight

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

这管用

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

前

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

样品

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

编辑：

</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的高度，应使用

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

document.getElementById'spanChatMinimize'.clientHeight

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

或 document.getElementById'spanChatMinimize'.offsetHeight

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

这管用

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

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

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

，记录三个值，单击跨度时，高度将发生变化

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

参考：

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

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

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

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

，记录三个值，单击跨度时，高度将发生变化

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

参考：

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

外部的.js文件在之前被引用，而在所有标记之后又被引用了吗？喜欢我的样品吗？是的。此外，事件侦听器没有绑定到span元素，这是我需要的。请参阅我的编辑，运行代码，当您单击span@Mr Billy时，您将收到警报，是否还有错误？请让我知道外部.js文件在之前被引用过。在所有标记之后，它会被引用吗？喜欢我的样品吗？是的。此外，事件侦听器没有绑定到span元素，这是我需要的。请参阅我的编辑，运行代码，当您单击span@Mr Billy时，您将收到警报，是否还有错误？请让我知道，DivChat容器中有更多的东西，它的高度不仅仅来自跨度元素。问题是，例如，如果我将divChatContainer style.height设置为10px，仍然不起作用。单击事件未与跨度单击关联。在调试中，它不会进入函数中间行。我检查并创建了所有元素，正确的名称执行了一个小功能，提醒所有元素的ID。@Mrbly addEventListener有效。如果单击span，Console.log将起作用。@MrBilly请参见JSFIDLE示例。Console.log在单击跨度时起作用divChatTopContainer具有跨度高度，这就是为什么我要将包含跨度的divChatContainer设置为跨度高度，从而仅显示顶部容器。必须显示跨度，因为在最小化之后，跨度将被更改为最大。对于相反的过程，divChatContainer中有更多的内容，其高度不仅仅来自跨度元素。问题是，例如，如果我将divChatContainer style.height设置为10px，仍然不起作用。单击事件未与跨度单击关联。在调试中，它不会进入函数中间行。我检查并创建了所有元素，正确的名称执行了一个小功能，提醒所有元素的ID。@Mrbly addEventListener有效。如果单击span，Console.log将起作用。@MrBilly请参见JSFIDLE示例。Console.log在单击跨度时起作用divChatTopContainer具有跨度高度，这就是为什么我要将包含跨度的divChatContainer设置为跨度高度，从而仅显示顶部容器。必须显示跨度，因为对于反向过程，跨度将在最小化后变为最大。