js选取元素的宽（高）度

拼搏现实的明天。 2022-08-13 18:47 164阅读 0赞

我们所知道的获取元素的宽高有两种办法：

1、

var obj = document.getElementById('div1');
    var width = obj.style.width;//获取该元素的宽度

2、

var obj = document.getElementById('div1');
    var width = obj.offsetWidth;//获取该元素的宽度

但是这两种在一定程度上还是有差别的。

当一个元素的宽高都写在样式表中（独立的css文件中）时，要用第二种。offsetWidth

当元素的宽高写在标签中（通过style=“”来写的）时，两种都可以。offsetWidth和style.width

同理，获取高度也是如此。

下面我们来测试一下为什么写在css文件里的left、top获取不到：

我们在css文件里定义这个div的属性：

#div1
    {
    position:absolute;
    width:100px;
    height:100px;
    border:1px solid black;
    background-color:red;
    left:10px;
    }

我们定义了这个div为绝对定位，然后左边距离浏览器左边为10px。

现在我们来用js获取一下：

<pre name="code" class="javascript">var oDiv = document.getElementById('div1');
    console.log(oDiv.style.left);
    console.log(typeof(oDiv.style.left));

我们通过向控制台输出这个div的style.left和style.left的变量类型。

可以看到控制台输出的结果为：

![Center][]

可以看出，这样输出的oDiv.style.left的值为空，什么也没有输出，类型是string。

下面，我们再来输出一下offsetLeft看看其值和类型是什么。

var oDiv = document.getElementById('div1');
    console.log(oDiv.offsetLeft);
    console.log(typeof(oDiv.offsetLeft));

![Center 1][]

这时候就有输出了，而且类型是一个number类型，这样以后再进行位置的变换的时候更方便进行直接加减。

当把div的left属性设置在标签中时：

<div id="div1" style="left:10px"></div>

这时，再通过上面两种输出来测试可以发现，（我就不一步一步来了，这个交给你们感兴趣的测试一下把）

当我们用oDiv.style.left来进行输出时。

输出的是10px

类型是string

这时该值不再是空的了，而是10px。

用offsetLeft输出时，输出的依然是

值：10

类型：number

[Center]: /images/20220810/43f9aa0f1386449abe5bd6cefcfb25b9.png
[Center 1]: /images/20220810/3c1e7cf679ce43f5b070f7356aaa4e4e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，164人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS--获取元素的高度与宽度

原文网址：[JS--获取元素的高度与宽度\_IT利刃出鞘的博客-CSDN博客][JS--_IT_-CSDN] 简介说明本文介绍如何使用JavaScript获取HT

港控/mmm°/ 2024年03月30日 12:24/ 0 赞/ 67 阅读

相关 js监听div元素的宽高变化

[js监听div元素的宽高变化][js_div] [javascript][] 发布于 2019-06-27 ![4b9cb6f12946ae5fdc7efddb5c

待我称王封你为后i/ 2023年10月11日 15:14/ 0 赞/ 51 阅读

相关 Js公共函数------获取目标元素的高度height

废话不多说，直接上代码 / getElementHeight @description 获得目标元素height @p

朴灿烈づ我的快乐病毒、/ 2022年11月20日 03:56/ 0 赞/ 163 阅读

相关 js选取元素的宽（高）度

我们所知道的获取元素的宽高有两种办法： 1、 var obj = document.getElementById('div1'); var width =

拼搏现实的明天。/ 2022年08月13日 18:47/ 0 赞/ 165 阅读

相关 js中各种高度和宽度的获取方式

<script> function getInfo() \{ var s = ""; s += " 网页可见区域宽："+ document.body.clien

逃离我推掉我的手/ 2022年08月09日 06:58/ 0 赞/ 160 阅读

相关 js中如何获取元素的高度

方法一：使用jquery $("\id").height(); 方法二：使用dom document.getElementById("id").style.

太过爱你忘了你带给我的痛/ 2022年07月16日 13:10/ 0 赞/ 524 阅读

相关 JS获取两个元素高度并且设定两个元素高度一致

function equityHeight(id1, id2) { if (/\d/.exec(id2)[0] > indexElement) {

心已赠人/ 2022年06月13日 05:54/ 0 赞/ 630 阅读

相关 js中动态获取页面的高度和宽度的方法总结

javascript,jquery获取网页的高度和宽度： javascript: 可视区域宽：document.documentElement.clientWidth(wi

旧城等待，/ 2022年05月09日 16:44/ 0 赞/ 210 阅读

相关选取html页面中所有的图片的宽高

代码如下： $('img').each(function()\{

今天药忘吃喽~/ 2022年05月08日 13:04/ 0 赞/ 257 阅读

相关选取部分张量元素

代码1： t=torch.arange(12) print(t) print(t[3],t[0]) print(t[-5]) prin

今天药忘吃喽~/ 2022年04月10日 20:46/ 0 赞/ 176 阅读