Example, file read-element-height.html :
<html>
<head>
<title>read element height</title>
<script type="text/javascript">
function getXYpos(elem) {
if (!elem) {
return {"x":0,"y":0};
}
var xy={"x":elem.offsetLeft,"y":elem.offsetTop}
var par=getXYpos(elem.offsetParent);
for (var key in par) {
xy[key]+=par[key];
}
return xy;
}
function getHeightBetweenElements(elem1, elem2) {
var xy1 = getXYpos(elem1);
var xy2 = getXYpos(elem2);
return xy2.y - xy1.y;
}
</script>
</head>
<body>
Other text here<br/>
Other text here<br/>
Other text here.
<div id="container">
<div id="pos-reper1"></div>
<div style="width: 300px; margin: 0 auto;" id="container-text">
text sakfjdsio fdiojsifojdsio fjdiojs fds
text sakfjdsio fdiojsifojdsio fjdiojs fds
text sakfjdsio fdiojsifojdsio fjdiojs fds
text sakfjdsio fdiojsifojdsio fjdiojs fds
text sakfjdsio fdiojsifojdsio fjdiojs fds
text sakfjdsio fdiojsifojdsio fjdiojs fds
text sakfjdsio fdiojsifojdsio fjdiojs fds
</div>
<div id="pos-reper2"></div>
</div>
<div>
Height of the dynamic text box (between 'pos-reper1' and 'pos-reper2') is:
<script type="text/javascript">
var h = getHeightBetweenElements(document.getElementById('pos-reper1'), document.getElementById('pos-reper2'));
document.write(h + 'px');
</script>
</div>
<div>
Adjusting container height and adding extra 50px...
<script type="text/javascript">
var h_container = h + 50;
document.getElementById('container').style.height = h_container + 'px';
document.getElementById('container').style.backgroundColor = 'PaleGoldenrod';
</script>
</div>
</body>
</html>
No comments:
Post a Comment