jquery 或者js获取div1的高度并复制给div2

jquery 或者js获取div1的高度并复制给div2,第1张

是我眼花看错题主的需求还是我理解错了:

$("#div2")height($('#div1')height())

而不是:

$("#div1")height($("#div2")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>

divscrollHeight

就可以了。

但是这里有个问题,如果内容撑出去了,那么这个scrollHeight就是内容的高度,

如果内容高度没有div的高度高的话,scrollHeight的值就是div的高。

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>

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:indexhtml,填充问题基础代码。

2、在indexhtml中的<script>标签中,输入js代码:var id = $('div')attr('id');documentbodyinnerText = id;。

3、浏览器运行indexhtml页面,此时取到了div的id并成功打印出了。

用clientHeight或offsetHeight。

对于没有具体设置高度的元素,不能直接用height获取高度。

clientHeight表示内容可见区域高度;offsetHeight不同浏览器数值不尽相同,除了clientHeight的高度外还包括边框等的高度。

以上就是关于jquery 或者js获取div1的高度并复制给div2全部的内容,包括:jquery 或者js获取div1的高度并复制给div2、javascript如何获取div的class中设置的宽高度、js 或jquery 怎么获取div的scrollHeight等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9796125.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-02
下一篇 2023-05-02

发表评论

登录后才能评论

评论列表(0条)

保存