给div设置一个id或者class：
html部分：
<div id="mydiv"></div>
js部分：
<script>
//获取mydiv
var mydiv=documentgetElementById("mydiv");
//获取#mydiv的高度
var divheight=mydivstyleheight;
//设置mydiv行高
mydivstylelineHeight=divheight;
</script>
javascript获取div的class中设置的宽高度：
高度（offsetHeight）：
<head><title>用js获取div的高度</title></head><style type="text/css">
#box{border:1px solid #ff0000;width:200px; }
</style>
<script language="javascript">
function jj(){
var pp=documentgetElementById("box")offsetHeight;
alert(pp);
}
</script>
<body>
<div id="box">
<p>段落内容</p><p>段落内容</p>
<input type="button" onclick="jj();" value="click">
</div>
</body>
宽度（offsetWidth）：
<head><title>用js获取div的高度</title></head><style type="text/css">
#box{border:1px solid #ff0000;width:200px; }
</style>
<script language="javascript">
function jj(){
var pp=documentgetElementById("box")offsetWidth;
alert(pp);
}
</script>
<body>
<div id="box">
<p>段落内容</p><p>段落内容</p>
<input type="button" onclick="jj();" value="click">
</div>
</body>
js里面提供了很多的方法，可以计算DIV的高度，以及也可以给DIV直接复制。
如下是代码的实现：
<body><div style="width:100px; height:100px; background:#ccc;" id="div"></div>
</body>
<script>
var oDiv = documentgetElementById('div');
alert(oDivoffsetHeight); //这个就是获取DIV的高度
oDivstyleheight = oDivoffsetHeight + 100 + 'px'; //这个就是直接给DIV的高度赋值。
</script>
这个jquery应该可以娶到的。给你一个实例，注意自己添加jquery文件哈
<script language='javascript'>$(function(){
$("#adds")click(function(){
$("#xx")append("<h2>添加内容</h2>");
});
$("#geth")click(function(){
vh=$("#xx")height();
$("#xx")prepend("<h2>我的高度为："+vh+"</h2>")
});
});
</script>
<div style="width:200px; height:200px; display:block; overflow-y:scroll">
<div id="xx">
sdfsdfs
sdfsdf
sdfsdf
</div>
</div>
<a href="javascript:;" id="adds">点击给XX里面添加内容</a>
<a href="javascript:;" id="geth">点击获取xx的高度</a>
如果是body不需要勇ID的形式来获取的：
<script type="text/javascript">var s = " ";
documentdocumentElementscrollTop 就是滚动条距离顶部的位置（可变）
documentdocumentElementscrollLef 指滚动条距离左边的位置（可变）
s += "\r\n<br>网页可见区域宽： "+ documentbodyclientWidth;
s += "\r\n<br>网页可见区域高： "+ documentbodyclientHeight;
s += "\r\n<br>网页可见区域宽： "+ documentbodyoffsetWidth + " (包括边线的宽) ";
s += "\r\n<br>网页可见区域高： "+ documentbodyoffsetHeight + " (包括边线的宽) ";
s += "\r\n<br>网页正文全文宽： "+ documentbodyscrollWidth;
s += "\r\n<br>网页正文全文高： "+ documentbodyscrollHeight;
s += "\r\n<br>网页被卷去的高： "+ documentbodyscrollTop;
s += "\r\n<br>网页被卷去的左： "+ documentbodyscrollLeft;
s += "\r\n<br>网页正文部分上： "+ windowscreenTop;
s += "\r\n<br>网页正文部分左： "+ windowscreenLeft;
s += "\r\n<br>屏幕分辨率的高： "+ windowscreenheight;
s += "\r\n<br>屏幕分辨率的宽： "+ windowscreenwidth;
s += "\r\n<br>屏幕可用工作区高度： "+ windowscreenavailHeight+" （去掉状态栏）";
s += "\r\n<br>屏幕可用工作区宽度： "+ windowscreenavailWidth;
//alert(s);
documentwrite(s);
</script>
<style type="text/css">
#leftbox{
float:left;
width:200px;
background-color:#FF0000;
}
#rightbox{
float:left;
width:200px;
background-color:#FFFF00
}
bottom{
display:block;
clear:both;
background:#0000FF;
width:400px;
height:50px;
color:#FFFFFF;
}
</style>
<div id="leftbox">左边div的高度会随右边自动调整</div>
<div id="rightbox">右边div的内容是变化的，比如像这样很多很多也没有关系，因为左边和下边的div会跟着变化的。右边div的内容是变化的，比如像这样很多很多也没有关系，因为左边和下边的div会跟着变化的。右边div的内容是变化的，比如像这样很多很多也没有关系，因为左边和下边的div会跟着变化的。右边div的内容是变化的，比如像这样很多很多也没有关系，因为左边和下边的div会跟着变化的。右边div的内容是变化的，比如像这样很多很多也没有关系，因为左边和下边的div会跟着变化的。</div>
<script language="javascript">
if(rightboxoffsetHeight>leftboxoffsetHeight)
{ leftboxstyleheight=rightboxoffsetHeight+"px";}
else
{ rightboxstyleheight=leftboxoffsetHeight+"px";}
</script>
<div class="bottom">这里是下方的div，会随着上面div的高度变化而移动</div>
以上就是关于JS怎么获取div（高度和宽度都已设置百分比，继承父级）的height并应用于该div的line-height；全部的内容，包括:JS怎么获取div（高度和宽度都已设置百分比，继承父级）的height并应用于该div的line-height；、javascript如何获取div的class中设置的宽高度、js如何计算并赋予DIV高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）