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. android学习---屏幕旋转

    /** *问题:今天学习android访问Servlet,Servlet给返回一个xml格式的字符串,android得到数据后将其显示到一个TextView中,发现Activity得到数据显 * 示到 ...

  2. APP设计规范大全

    大图可保存到本地

  3. 从数据库中导出.csv文件

    需求: 本次将数据库中的数据导出成.csv文件(office可以打开), //数据的生成,根据你所选中的数据进行生成 //params:$activity_id -> 活动的id //param ...

  4. Git学习04 －－分支管理

    每次commit,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支.HEAD严格来说不是指向提交,而是指向master ...

  5. JVM的体系结构——JVM之三

    JVM的内部体系结构分为四部分, (1)类装载器(ClassLoader)子系统 作用: 用来装载.class文件 (2)执行引擎 作用:执行字节码,或者执行本地方法 (3)垃圾回收子系统 作用:垃圾 ...

  6. 【D3.V3.js系列教程】--（十五）SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

  7. C# 多线程 异步加载 窗体

    C# 多线程 异步加载 窗体 分类: C#2014-05-28 16:57 1286人阅读 评论(0) 收藏 举报 异步加载 我们在使用 windowform 编程的时候,我们或许可能会越到,各种在窗 ...

  8. 为什么在DllMain里不能调用LoadLibrary和FreeLibrary函数？

    为什么在DllMain里不能调用LoadLibrary和FreeLibrary函数? MSDN里对这个问题的答案十分的晦涩.不过现在我们已经有了足够的知识来解答这个问题.考虑下面的情况:       ...

  9. iOS伪实现打地鼠游戏

    打地鼠是一款可以用iOS知识来实现的一种游戏.其核心技术就是通过imageView来播放动画,点击button时来停止当前播放的动画开始击打地鼠的动画.话不多说直接上代码. 这是添加当前的背景图片,然 ...

  10. 新闻公布系统 (Asp.net 三层架构 )

    2012年度课程设计---新闻公布系统(小结)                                                                             ...