jquery要获取某个元素的属性、样式等等，要先获取这个元素：通过xpath很容易获取，比如用div的id获取——$('#dv')
获取这个元素之后就很容易了，通过height等方法可以获取元素的具体内容等：如高度
$('#dv')height();
宽度：$('#')width();
以 4:3 为例, 想要DIV按照这个宽高比,在网页中随着横向的伸缩,在纵向上等比伸缩, 用一个外围DIV来包裹它,且将这个外围DIV称之为Wrapper, Wrapper 的CSS样式如下:
这个Wrapper的宽高比就是 4:3 , 其中的奥妙就在于 padding-bottom:75% , padding-bottom 是相对宽度的也就是整个Wrapper的高度等于 padding-bottom 的高度,Wrapper 没有内容高度没有内容高度如何往其中放置我们准备的DIV呢答案是 绝对定位 , 所以Wrapper的样式中有 position:relative , 方便子元素相对Wrapper的左顶点定位
最后我们把想要保持宽高比的DIV放到Wrapper中去, 这个DIV且称之为Inner, 下面是这个Inner的CSS样式:
结束
先给div定义overflow:hidden样式，不是为了剪裁，只是为了页面加载的时候，不会把div撑开，让页面布局被破坏，然后给所有需要自适应的，定义一个相同的name属性，然后在页面onload事件，或者页面最后调用一个脚本，获取全部name属性为你定义的，然后循环遍历这些，和的父对象，然后给的width，height属性进行值定义，就OK了
和父对象对比的时候，width和height分开对比，当width和父对象相同的时候，并且height小于等于父对象，只设置width就够了，这样进行的缩放，就是原比例缩放，不然会拉伸失真的，相反，当height和父对象相同的时候，并且width小于等于父对象，只设置height就够了
以上是客户端处理方法，如果太大太多的话，对服务器压力比较大，另一种方法就是在用户上传的时候，编写程序，进行判断，手动把缩小到指定大小，判断方法类似上边那一段，但是你设置width的时候，需要手动计算一下height，因为自己编写的程序，是不会自动保持比例的
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>
代码大致如下供参考：
var image=new Image();imagesrc=//你的背景的src;
var divelement = documentgetElementById(你的div的id);
divelementstyleheight=(imageheightdivelementoffsetWidth)/imagewidth + "px";
几个需要注意的地方是imagesrc=xxx后需要等待直到下载完成。但是如果这个脚本是在你的div已经初始化好之后调用的话，那么已经被下载过了，所以直接进行后面的就好。另外以styleheight来设置高度的话后面需要加单位，比如px
$(window)是jquery 对象， 加height() 也是就是获取窗口高度
同理，如果你想获取某个div的高度可以使用
var divHeight = $("div")height();/或者/
var divHeight = $("div")[0]offsetHeight;
$("div")是jquery对象，$("div")[0] 或者 $("div")get(0)是dom对象
但是在开发中会有很多坑 这点你得注意
如果 当前的 元素是 隐藏状态 display ： none
那你是无法通过上述方法和获取宽高的 ，所以在开发中如果没有获取到宽高，就要留意上面的代码在执行的时候 该元素是不是在隐藏状态
如果你想把 屏幕的高度 赋值给div
$("div")height(winHeight)// 或者
$("div")[0]offsetHeight = winHeight
常用div宽度获取 domoffsetWidth:只读属性,返回元素的布局宽度数值(int)(content + padding + border),此数值为四舍五入后的整数 domgetBoundingClientRect()width:只读属性,返回元素的布局宽度数值(int)(content + padding + border),此数值不会四舍五入 windowgetComputedStyle(dom)width:只读属性,返回元素内容宽度的数值和单位(string)(content) domscrollWidth:只读属性,返回全部content+ padding 的宽度数值(int) domclientWidth:只读属性,返回元素内容可视区域的宽度(content + padding)
以上就是关于jquery怎么获得div内容高度全部的内容，包括:jquery怎么获得div内容高度、HTML中保持DIV宽高比、让图片适应div大小等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）