use height of another element dynamically
Question
I want to use the height of an object for another one. If the height of object 1 changes (read more button), the height of object 2 should change as well. Do I have to use jQuery for this?
#vr { height: 0px; display: inline-block; background-color: #808080; border-style: solid; border-color: #808080; -webkit-transition: 1000ms ease in; -moz-transition: 1000ms ease-in; -o-transition: 1000ms ease-in; -ms-transition: 1000ms ease-in; transition: 1000ms ease-in; position: absolute; margin-top: -12px; margin-left: 12px; width: 1px; float:right; margin-left: 200px; } #content { width: 180px; font-family: 'Open Sans', sans-serif; text-align: justify; display: inline-block; }
<script type="text/javascript"> function bigger() { document.getElementById("vr").style.height = "100px"; } </script> <body onload="bigger()"> <div id="content"> <p>test</p> </div> <hr id="vr" /> </body>
Is the height() function useful in this context?
1 answers
solution1
1 2015-07-17 20:52:07
Make the function that is called by the "read more" button measure the element's offsetHeight, and then set the height of the second element. (The example uses box-sizing: border-box for simplicity, otherwise you have to take padding/border/margin sizes into account.)
function addListener() { var elem = document.getElementById("div1"); if (elem) elem.addEventListener("click", showMore, false) else document.addEventListener("DOMContentLoaded", addListener, false); } addListener(); function showMore() { var elem = document.getElementById("div1"); elem.style.maxHeight = "1000px"; document.getElementById("div2").style.height = elem.offsetHeight + "px"; }
DIV {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} DIV {width: 100px; float: left; margin: 10px; border: 1px solid black; padding: 5px;} #div1 {max-height: 100px; overflow: hidden;} #div2 {height: 100px;}
<DIV ID="div1">click this container to extend its height, so that the whole text becomes visible.</DIV> <DIV ID="div2"></DIV>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.