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. Oracle数据库游标的类型

    游标是SQL的一个内存工作区,由系统或用户以变量的形式定义.游标的作用就是用于临时存储从数据库中提取的数据块.Oracle数据库的Cursor类型包含三种: 静态游标:分为显式(explicit)游标 ...

  2. Sublime Text 3中使用正则表达式删除空行

    Sublime Text 3 中使用正则表达式删除空行 Ctrl+H Find What: \n\n+ Replace With:\n

  3. java服务器简单实现

    一 HTTP http请求 一般一个http请求包括以下三个部分: 1 请求方法,如get,post 2 请求头 3 实体 一个http请求的实例如下:GET /index.jsp HTTP/1.1H ...

  4. arm mov 指令

    语法格式: mov {条件} 1目的寄存器,2源操作数 作用: MOV指令可完成从另一个寄存器.被移位的寄存器或立即数赋值到目的寄存器.其中S选项为指令的操作结果是否操作CPSR中的条件标志位,当没有 ...

  5. JAVA中List与Array之间互换

    1.Array转List ArrayList<String> list = new ArrayList<String>(); String[] arr = new String ...

  6. AngularJS之Factory vs Service vs Provider

    原文  http://www.linuxeden.com/html/news/20140509/151538.html 当你初试 Angular 时,很自然地就会往 controller 和 scop ...

  7. make clean与make distclean的区别

    make clean仅仅是清除之前编译的可执行文件及配置文件. 而make distclean要清除所有生成的文件. Makefile 在符合GNU Makefiel惯例的Makefile中,包含了一 ...

  8. Yii系列总结：yii 标签用法

    yii 常用标签:label标签.文本标签.error标签.textarea标签.hidden标签.password标签.url标签.radio标签.file标签.button标签.checkBox标 ...

  9. 创建文件夹并解决解决unicode和ASCII码转换的问题

    # -*- coding: UTF-8 -*-import sysimport timeimport os #解决unicode和ASCII码转换的问题reload(sys) #解决unicode和A ...

  10. python执行外部程序模块pyshell

    写python程序的时候需要用到调用外部命令的模块,看了一下,还真不少,头疼,用着不顺手.根据官网推荐,我根据官网的subprocess模块定制了一个自己的shell,同时借鉴了github上面的sh ...