style.width,clientWidth,offsetWidth

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>document</title>

<style>

div{ padding:40px 50px;}

#div1 { background:red;}

#div2 { background:blue; position:relative;}

#div3 { background:orange;}

</style>

<script type="text/javascript">

    window.onload = function() {

        var oDiv1 = document.getElementById('div1');

        /*

            style.width:样式宽（带单位）

            clientWidth: 可视区宽（样式宽+padding 不带单位）

            offsetWidth:占位宽（样式宽+padding+border 不带单位）

        */

        alert(oDiv1.style.width + '  ' + oDiv1.clientWidth + '  ' + oDiv1.offsetWidth);

    }

</script>

</head>

<body id="body">

    <div id="div1" style="width:100px; height:100px; padding:10px; margin:10px; border:1px solid red;"></div>

</body>

</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
div{ padding:40px 50px;}
#div1 { background:red;}
#div2 { background:blue; position:relative;}
#div3 { background:orange;}
</style>
<script type="text/javascript">
    
    window.onload = function() {
        
        var oDiv1 = document.getElementById('div1');
        /*
            style.width:样式宽（带单位）
            clientWidth: 可视区宽（样式宽+padding 不带单位）
            offsetWidth:占位宽（样式宽+padding+border 不带单位）
        */
        
        alert(oDiv1.style.width + '  ' + oDiv1.clientWidth + '  ' + oDiv1.offsetWidth);
    }
    
</script>
</head>

<body id="body">
    <div id="div1" style="width:100px; height:100px; padding:10px; margin:10px; border:1px solid red;"></div>
</body>
</html>

javascript 获取元素宽高的更多相关文章

  1. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  2. JS获取元素宽高的两种情况

    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

  3. 微信小程序之动态获取元素宽高

    我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...

  4. 滚动加载图片（懒加载）实现原理（这是旧实现，仅做为获取元素宽高api的参考）

    https://www.cnblogs.com/flyromance/p/5042187.html 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载 ...

  5. js获取元素宽高、位置相关知识汇总

    常见clientWidth.clientHeight.offsetWidth.offsetLeft,clientX.scrollTop等词语,比较混乱,现在总结下他们的区别. 1. clientWid ...

  6. javascript获取网页宽高，屏幕宽高，屏幕分辨率等

    ​ <script> var s = ""; s += "\r\n网页可见区域宽:"+ document.body.clientWidth; s + ...

  7. Vue中获取元素宽高

    <div ref="init"></div> 写在 页面 方法 部分 这里的 offsetHeight 是返回元素的宽度(包括元素宽度.内边距和边框,不包括 ...

  8. js 获取元素宽高

    可以用源生js的.offsetHeight .offsetWidth属性 document.getElementById("temp_form").offsetHeight // ...

  9. uni-app获取元素宽高封装

    getElSize(id) { //得到元素的size return new Promise((res, rej) => { uni.createSelectorQuery().select(' ...

随机推荐

  1. 解决升级Xcode后插件不能使用的问题

    从Xcode 5开始,苹果要求加入UUID证书从而保证插件的稳定性.因此Xcode版本更新之后需要在插件的Info.plist文件中添加当前Xcode的UUID. 具体步骤如下: 1.获取Xcode的 ...

  2. Windows Server 2008 R2 IIS重装

    背景描述: 在一个刚睡醒午觉后的下午,忽然收到客户反馈,说昨天开始应用特别卡,各种卡各种不好用,忽然想到上次说要优化服务器IIS配置还一直没弄,然后迷迷糊糊的就开始进行客户现场服务器IIS配置优化,涉 ...

  3. python- 如何return返回多个值

    函数的return 语句只能返回一个值,可以是任何类型. 因此,我们可以“返回一个 tuple类型,来间接达到返回多个值 ”. 例:   x 除以 y 的余数与商的函数 def    F1 ( x, ...

  4. UVA 11214 Guarding the Chessboard

    题意: 皇后防御的范围是他所在横.竖.对角线,地图上的#为可以放旗子的地方.问最少放几个皇后能防守所有#. 分析: vis数组开4维,对应行.列.主对角线.副对角线 代码: #include < ...

  5. Linux下MySql出现#1036 – Table ‘ ‘ is read only 错误解决方法

    本文为转载内容,感谢原作者.原文出自:http://zhaoxiaoru39.blog.163.com/blog/static/609552192012511104730115/ 我遇到的问题是:在n ...

  6. php非递归无限级分类.

    项目需要.递归无限级分类效率实在太低.理了半天思路写的. 分类越多效率越高. /** * 单次循环返回无限极分类嵌套 * @param array $data 操作的数组 * @param strin ...

  7. Mobile Matrices

    This is an attempt to compile a list of relevant specifications for all modern smart phones and mobi ...

  8. css3圆角讲解

    Css3圆角讲解:想必大家对于图片,背景圆角,都不陌生吧, 圆角语法:border-radius:圆角值: 这个值可以使用:em ,ex,pt,px,百分比; Border-radius跟margin ...

  9. Vue.js 学习示例

    本篇和大家分享的是学习Vuejs的总结和调用webapi的一个小示例:快到年底了争取和大家多分享点东西,希望能对各位有所帮助:本章内容希望大家喜欢,也希望各位多多扫码支持和推荐谢谢: » Vuejs ...

  10. jquery settimeout使用

    setTimeout(location,5000); //延迟5秒刷新页面 function location(){ window.location.href = window.location.hr ...