将div高度更改为div div的高度点击使用JS

我有一个div（divChatContainer），它有一个顶部div（divChatContainerTop），里面有一个“span”元素。我想要在单击“span”元素时将容器div的大小调整为“divChatContainerTop”高度（即：最小化聊天窗口，以便只显示“divChatContainerTop”）。将div高度更改为div div的高度点击使用JS

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外部的HTML中。

编辑：下面的代码工作，以尽量减少

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

来源

2015-11-01 Mr Billy

昨晚我似乎误解了这个问题。如果你想获得股利的高度，而不会首先设置高度财产，你应该尝试之一：

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

Updated jsfiddle，记录三个值，当你点击跨度，高度将更改。

参考：

来源

2015-11-01 15:49:56 iplus26

divChatContainer里面有更多的东西，它的高度并不仅仅来自“span”元素。事情是，如果我设置“divChatContainer”“style.height”为“10px”例如，仍然不起作用。点击事件没有关联到“span”点击。在调试中，它不会进入功能（中间）行。我检查了所有元素，并创建了正确的名称（做了一个提醒所有元素的ID的小函数）。 –

@MrBilly addEventListener的作品。如果您点击跨度，Console.log将起作用。 – iplus26

@MrBilly看到jsfiddle的例子。当您点击跨度时Console.log起作用 – iplus26

-1

简单！你应该在最后添加你的脚本（在关闭body标签之前），因为dom需要找到你在脚本中引用的元素，所以它应该先解析过。这将解决未触发，但事件的problme吃出聊天之类的函数，你必须编辑你的代码有点 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.getEleme ntById（ 'spanChatMinimize'）clientHeight。

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

这个工程！

来源

2015-11-01 15:48:42

外部js文件被之前引用。 –

和所有的标签之后呢？像我的样品？ –

是的。另外，事件监听器没有绑定到span元素，因为我需要。 –

将div高度更改为div div的高度点击使用JS

回答

相关问题