javascript获取设置div的高度和宽度

最新推荐文章于 2024-12-16 15:14:20 发布
原创 最新推荐文章于 2024-12-16 15:14:20 发布 · 1.8w 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #浏览器 #ie

本文介绍了一种使用JavaScript获取和设置HTML元素（如div）的高度和宽度的方法，该方法能够兼容主流浏览器，包括IE和Firefox。通过简单的示例代码展示了如何实现这一功能。
Javascript如何获取和设置div的高度和宽度，并且兼容任何浏览器？看代码：

<div id="div1" style="height:300px;width:200px;">http://www.itdos.com</div>

<div id="div2" style="height:30px;width:20px;">http://www.itdos.com</div>

获取div1的宽高度：

alert(document.getElementById("div1").offsetHeight);  //兼容FF、IE等

alert(document.getElementById("div1").offsetWidth);    //兼容FF、IE等

设置div1的宽高度为div2的宽高度：

document.getElementById("div1").style.height=document.getElementById("div2").offsetHeight;      //仅IE

document.getElementById("div1").style.height=document.getElementById("div2").offsetHeight+ "px";      //兼容FF、IE等

document.getElementById("div1").style.width=document.getElementById("div2").offsetWidth;   //仅IE

document.getElementById("div1").style.width=document.getElementById("div2").offsetWidth+ "px";   //兼容FF、IE等

           
如何使用JavaScript获取DIV元素的高度
CodeWhizZ的博客
09-20 1201
在JavaScript中，我们经常需要获取HTML元素的属性值，比如DIV元素的高度。通过JavaScript，我们可以轻松地获取DIV元素的高度，并在需要的地方使用这个值。将DIV元素的高度打印到浏览器的控制台中。你也可以将高度的值用于你的代码逻辑中，而不仅仅是打印出来。属性返回一个整数，表示元素的像素高度，包括元素的边框、内边距和滚动条（如果存在）。为你自己DIV元素的ID。例如，如果你的DIV元素的ID是。替换为你自己DIV元素的ID，以正确获取元素的高度。这段代码可以用于任何具有ID的DIV元素。
javascript获取设置div的高度和宽度兼容任何浏览器
10-26
在Web开发过程中，获取和设置HTML元素的高度与宽度是常见的需求。特别是对于DIV元素，开发者往往需要动态地改变其大小以适应不同的布局需求。在不同浏览器之间，由于浏览器的渲染引擎差异，有时会出现兼容性问题，...
JS获取一个未知DIV高度的方法
10-21
主要介绍了JS获取一个未知DIV高度的方法,涉及javascript针对页面元素属性的动态操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
js获取div高度的代码
10-30
不错的获取div高度的代码，主要是方便测试一些信息，用到了javascript的offsetHeight属性
JS获取DIV对应的宽和高
kxmdjqq的博客
09-12 5800
方式一：dom.style.width/height （仅取出内联样式的宽高，有单位） 方式二：dom.clientWidth/Height（包括元素宽度、内边距，不包括边框和外边距） 方式三：dom.scrollWidth/Height（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距） 方式四：dom.offsetWidth/Height（包括元素宽度、内边距和边框，不包括外边距） 方式五w...
js获取div的高度
qq_44784918的博客
10-28 695
// 设置左栏的粘滞定位 var left=document.getElementById("left-bar"); alert(window.getComputedStyle(left).height);
javascript获取设置div的高度和宽度兼容任何浏览器.docx
01-18
### JavaScript 获取和设置 div 的高度和宽度以兼容各种浏览器 #### 概述 在Web开发过程中，经常需要处理不同浏览器间的兼容性问题。对于获取和设置`div`元素的高度和宽度，JavaScript提供了多种方法来确保跨...
jquery实现动态改变div宽度和高度
10-24
这两个方法都允许我们获取或设置元素的宽度和高度。当我们传递一个参数给这两个方法时，它会设置元素的尺寸；而如果没有传递参数，它则会返回当前元素的宽度或高度。 在文章中提供的HTML代码中，我们定义了一个div...
javascript获取隐藏元素(display:none)的高度和宽度的方法
01-19
js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法： 代码如下:function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性 return obj.currentStyle...
获取div的高度
weixin_34195142的博客
10-11 7923
1、获取div的文档总高度（必须DOM操作）： var scrollHeight=document.getElementById("inner").scrollHeight; // jq中没有scrollHeight -只有scrollTop():// 所以用DOM操作获取元素并计算scrollHeight。12342、获取div的窗口显示高度： var height=$("#inner")...
js获取页面及个元素高度、宽度的代码
11-26
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线和滚动条的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高(ff)：document.body.scrollTop; 网页被卷去的高(ie): do
JS动态获取DIV的宽度和高度px！
tongtongsong的博客
01-14 4311
JS动态获取div的宽度: var o = document.getElementById("div"); var width= o.clientWidth||o.offsetWidth; console.log(width);JS动态获取div的高度同理： var o = document.getElementById("div"); var height= o.clientHeight||o.offsetHeight; console.log(height); ...
JS 获取div框的宽度和高度
jxdwuao的专栏
11-04 247
今天遇到问题，需要计算放置的说明文字的坐标点 网上大多说使用字体和文字长度来计算， 字体并不是等长的，所以计算不准确。 突然想起  div 的scrollWidth     和     scrollHeight   属性。 在将div的内容设置好了以后， 这2个准确得到了宽度 和 高度。   &lt;input type="button" onclick="calculate()" v...
如何用JavaScript获得div高度
qq_40198520的博客
02-06 6109
一共有三种方法 方法一：offsetHeight 与 clientHeight offsetHeight:总高度 clientHeight:总高度 - 边框*2 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
js&jq：获取div的宽度、高度、屏幕距离方法总结
kxy5201314的博客
10-21 1万+
jq获取div的宽度 var content = $(‘div’). width(); //只是获取content宽度 var contentWithPadding = $(‘div’). innerWidth(); //获取content+padding的宽度 var withoutMargin = $(‘div’). outerWidth(); //获取content+padding+border的宽度 var full = $(‘div’). outerWidth(true)
JS获取div高度的方法
weixin_30448603的博客
06-03 4690
有时在写页面时，需要获取一个div的高度。怎么才能获取呢？哈哈，先上结论。有两种方法。 offsetHeight 、clientHeight getComputedStyle offsetHeight 与 clientHeight 这两个属性都能获取元素的高度，它们有什么区别呢？ 代码说话~ <!DOCTYPE html> <html&gt...
js获取元素、div的实际高度宽度
weixin_43954090的博客
04-22 1558
我们看到jquery是这么写的 get: function( elem, computed, extra ) { if ( computed ) { return rdisplayswap.test( jQuery.css( elem, "display" ) ) && ( !elem.getClientRects().length || !elem.g...
js 获取自适应高度div的高度
热门推荐
YinghaoGuo的博客
04-07 1万+
忙了将近一个月的论坛官网终于做好了，今天在调试bug，遇到了一个问题，设计稿（左）和实际（右）：         好了大家发现问题了吧，就是最下方的版权块定位问题，方案是在屏幕中最新回复数量少或者无回复时，屏幕无滚动，版权块在屏幕最下方，如果评论过多，则版权块距离最后一条考评论的margin-top是固定的80px，然候要虑到要金融各种屏幕大小的手机，如果用fixed定位是绝对不行的，因
js 获得元素的宽度和高度
最新发布
zmy967131的博客
12-16 1127
widthheightmarginpadding实际样式。
js获取div的宽度和高度
06-03
可以使用JavaScript中的`offsetWidth`和`offsetHeight`属性来获取一个元素的宽度和高度。例如，如果要获取id为“myDiv”的div元素的宽度和高度，可以使用以下代码： ```javascript var myDiv = document.getElementById("myDiv"); var width = myDiv.offsetWidth; var height = myDiv.offsetHeight; ``` 这将返回一个数字，表示元素的宽度和高度（以像素为单位）。注意，`offsetWidth`和`offsetHeight`包括元素的边框和内边距，但不包括外边距。如果需要包括外边距，则可以使用`clientWidth`和`clientHeight`属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值